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

Published: 16 septembre 2022

Tags: Javascript;

DMCA.com Protection Status

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

Vidéo : conseils pour utiliser Async/Wait en JavaScript

Je cherchais à supprimer JQuery et à le remplacer uniquement par du javascript pour augmenter la vitesse d'un site Web (notamment en remplaçant tous les appels ajax qui récupèrent les données json depuis une url). J'ai trouvé beaucoup de documentations en ligne (voir les références ci-dessous) mais la vidéo (en anglais) youtube suivante de James Q. Quick résume très bien le tout :

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

Une première solution consiste à utiliser Fetch API. Un exemple ici avec données 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 ("promise") 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 utilisant "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>

Créer une requête non mise en cache

Notez que l'en-tête 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(), comment faire une requête non mise en cache ?, [Fetch PUT request obtient l'en-tête Cache-Control modifié sur Firefox et non Chrome] (https://stackoverflow.com/questions/62041565/fetch-put-request-gets-cache-control-header-modified-on-firefox-and-not-chrome) et Récupérer la réponse de mise en cache - les en-têtes sans cache ne fonctionnent pas comme prévu :

<!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