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:

Sommaire

Video: tips For Using Async/Await in JavaScript
Obtenir des données JSON à partir d'une URL à l'aide de l'API javascript: Fetch
Obtenir des données json à partir d'une URL à l'aide d'une fonction asynchrone
Spécifier le "header" pour ne pas mettre la requête en cache
Références

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>