Comment obtenir des données json à partir d'une URL en utilisant uniquement javascript ?

Active 20 mars 2022    /    Viewed 54    /    Comments 0    /    Edit


Exemples de comment obtenir des données json à partir d'une URL en utilisant uniquement javascript:

Video: tips For Using Async/Await in JavaScript

Mon objectif est de supprimer JQuery de mes sites afin d'augmenter le vitesse sur mobile de ces derniers. Pour cela il est interessant de savoir par exemple comment obtenir des données json à partir d'une URL en utilisant uniquement javascript (AJAX calls). Il y a plusieurs docs disponibles sur le web (voir les références ci-dessous) mais la video youtube de de James Q. Quick (en anglais) explique très bien comment faire cela:


Obtenir des données JSON à partir d'une URL à l'aide de l'API javascript: Fetch

Une première solution consiste à utiliser Fetch API.
Un exemple ici avec des fichier json stockées sur github:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>

            const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'

            fetch(url)
                .then( res => { return res.json(); } )
                .then( data => { console.log(data); } )
                .catch( err => { console.errror(error) } )

        </script>

    </body>
</html>

Obtenir des données json à partir d'une URL à l'aide d'une fonction asynchrone

Une autre approche consiste à utiliser await (Notez que await doit toujours être utilisé dans une fonction asynchrone)

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>

                const LoadData = async () => {
                    try {
                        const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'

                        const res = await fetch(url);
                        const data = await res.json();
                        console.log(data);
                    }catch(err) {
                        console.error(err)
                    }
                };

                LoadData();

        </script>

    </body>
</html>

Notez que la fonction LoadData renvoie une promesse et peut ensuite être utilisée dans une autre fonction asynchrone :

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>

                const LoadData = async () => {
                    try {
                        const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'

                        const res = await fetch(url);
                        const data = await res.json();
                        console.log(data);
                    }catch(err) {
                        console.error(err)
                    }
                };

( async () => {
 const data = await LoadData();
 console.log(data);
} )();

        </script>

    </body>
</html>

Une autre approche avec "then" :

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>

                const LoadData = async () => {
                    try {
                        const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'

                        const res = await fetch(url);
                        const data = await res.json();
                        console.log(data);
                    }catch(err) {
                        console.error(err)
                    }
                };

                LoadData().then( (data) => console.log(data) );

        </script>

    </body>
</html>

Spécifier le "header" pour ne pas mettre la requête en cache

Notez que l'en-tête (header) peut être spécifié dans l'API de récupération pour créer une requête non mise en cache côté client par exemple (voir fetch(), how do you make a non-cached request?, Fetch PUT request gets Cache-Control header modified on Firefox and not Chrome et Fetch caching response - no-cache headers not working as expected):

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script>

                const LoadData = async () => {
                    try {
                        const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'

                        const res = await fetch(url,{
                        method: 'GET', // *GET, POST, PUT, DELETE, etc.
                        mode: 'cors', // no-cors, *cors, same-origin
                        cache: 'no-cache'});
                        const data = await res.json();
                        //console.log(data);
                        return data;
                    }catch(err) {
                        console.error(err)
                    }
                };

                LoadData().then( (data) => console.log(data) );

        </script>

    </body>
</html>

Références


Card image cap
profile-image
Bazinga

Salut, je suis Ben.

J'ai développé ce site web à partir de zéro avec Django pour partager avec tout le monde mes notes. Si vous avez des idées ou des suggestions pour améliorer le site, faites le moi savoir ! (vous pouvez me contacter via le formulaire de la page d'accueil). Merci!



Did you find this content useful ?, If so, please consider donating a tip to the author(s). MoonBooks.org is visited by millions of people each year and it will help us to maintain our servers and create new contents.

Amount