API avec JavaScript

Consommer une API REST, en JavaScript, avec la fonction fetch().

Notions théoriques

Introduction à `fetch()` en JavaScript

La fonction fetch() est une fonction JavaScript moderne pour faire des requêtes réseau et manipuler les réponses, souvent utilisée pour consommer des API.

remarque

La fonction fetch() :

envoie une requête à une URL spécifique
puis retourne une promesse qui se résout avec la méthode .then()
pour obtenir un objet Response représentant la réponse à la requête.

Pour plus d'infos, consultez le Tuto sur les promesses Javascript.

astuce

En anglais, le verbe fetch signifie récupérer.

Différences XMLHttpRequest vs fetch()

À la différence de XMLHttpRequest qui fonctionne à l'aide de fonctions de rappel (callbacks),

la fonction fetch() utilise les promesses (promises) et fournit une meilleure alternative, qui peut être utilisée dans les service workers.

L'API Fetch intègre également des concepts HTTP avancés tels que le CORS et d'autres extensions de HTTP.

Sources : https://developer.mozilla.org/

Consommation d'une API publique

Pour consommer une API, on utilise fetch() pour envoyer une requête à une URL spécifique et traiter la réponse.

astuce

Les API REST fournissent souvent des données en JSON, qui peuvent être facilement manipulées en JavaScript.

Exemple de consommation d'une API

Imaginons que vous créez un site Web qui affiche des données de météo :

Vous appelez l'API météo avec fetch() en lui passant l'URL de l'API.
Vous utilisez .then() pour traiter la réponse et la convertir en JSON.
Vous manipulez ensuite les données JSON pour afficher la météo sur votre site.

Exercice pratique

Nous allons interroger l'API météo de weatherapi.com pour afficher la température d'Avranches, en temps réel.

Créez un dossier tp-api-meteo dans le dossier de vos Documents.
Inscrivez-vous sur weatherapi.com.
Créez un fichier meteo.html, dans le dossier tp-api-meteo, et ajoutez-y le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Météo du jour</title>
</head>
<body>
    <h1>Météo du jour</h1>
    <div id="meteo-container"></div>

    <script>
        function fetchWeather() {
            fetch('https://api.weatherapi.com/v1/current.json?key=<your-api-key>&q=Avranches')
                .then(response => response.json())
                .then(data => {
                    const weatherContainer = document.getElementById('meteo-container');
                    weatherContainer.innerHTML = `Il fait actuellement ${data.current.temp_c}°C à ${data.location.name}.`;
                })
                .catch(error => console.error('Erreur:', error));
        }

        fetchWeather();
    </script>
</body>
</html>

Remplacez <your-api-key> par votre clé API personnelle obtenue en vous inscrivant sur weatherapi.com.

attention

Il s'agit d'un exercice pratique pour apprendre comment consommer une API REST en Javascript.

Dans cet exercice pratique, votre clé d'API est stockée dans la page HTML, et donc accessible en consultant le code source de la page Web.

Donc pour des raisons de sécurité, il ne faut pas utiliser cet exemple en production.

Test de mémorisation/compréhension

TP - Consulter une BD des jours fériés

Mission : Vous allez créer une page Web qui affiche les prochains jours fériés en France.

Nous allons utiliser la même API publique que dans notre tuto API avec JavaScript qui fournit des informations sur les jours fériés :

API des jours fériés : https://date.nager.at/Api/

Étapes

Créez un dossier tp-api-rest dans le dossier de vos Documents.
Dans le dossier tp-api-rest, créez le fichier jours-feries.html et ouvrez le avec Visual Studio Code.

Avec Visual Studio Code, écrivez la structure de base HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Jours fériés en France</title>
</head>
<body>
    <h1>Prochains jours fériés en France</h1>
    <ul id="holiday-list"></ul>
</body>
</html>

Ajoutez du JavaScript

Ajoutez le code suivant, juste avant la balise de fermeture </body>, dans votre fichier HTML :

<script>
    // Cette fonction va récupérer les jours fériés et les afficher
    function loadHolidays() {
        // Ici, nous allons envoyer une requête à l'API
        // et ajouter les informations reçues à la liste <ul id="holiday-list"></ul>

        // à compléter ...

    }

    // Cette ligne de code appelle la fonction loadHolidays lorsque la page est complètement chargée
    window.addEventListener('load', loadHolidays);
</script>

Complétez la fonction loadHolidays()

Maintenant, vous allez ajouter du code JavaScript pour demander les informations sur les jours fériés à l'API et les afficher sur la page. Complétez le code de la fonction en ajoutant un appel à la fonction JavaScript fetch() pour envoyer une requête au serveur d'API à l'endpoint https://date.nager.at/api/v3/publicholidays/{Year}/{CountryCode} :
```
    function loadHolidays() {
        // Ici, nous utilisons 'fetch' pour envoyer une requête à l'API
        fetch('https://date.nager.at/api/v3/publicholidays/2026/FR')
            .then(response => response.json()) // Convertit la réponse en JSON
            .then(data => {
                const holidayList = document.getElementById('holiday-list');
                holidayList.innerHTML = ''; // Vide la liste avant d'ajouter des éléments
                // Pour chaque jour férié reçu, nous créons un élément de liste et l'ajoutons à la page
                data.forEach(holiday => {
                    const listItem = document.createElement('li');
                    listItem.textContent = `${holiday.date} - ${holiday.localName}`;
                    holidayList.appendChild(listItem);
                });
            })
            .catch(error => console.error('Erreur:', error)); // Si une erreur se produit, elle sera affichée dans la console
    }
```
- fetch() : Cette fonction envoie une requête à une URL donnée et récupère des données. Ici, elle demande les jours fériés à l'API date.nager.at.
- .then() : Après que fetch() ait récupéré les données, .then() est utilisé pour dire "ensuite, faites ceci avec la réponse".
  
  La première utilisation de .then() convertit la réponse en format JSON, qui est plus facile à manipuler avec JavaScript.
- .forEach() : Cette boucle parcourt chaque élément dans les données JSON reçues (chaque jour férié) et exécute une fonction pour chacun.
- document.createElement() : Cette commande crée un nouvel élément HTML, que vous pouvez ensuite ajouter à votre page.
- .appendChild() : Cette fonction ajoute un nouvel élément à un élément existant dans la page. Dans ce cas, elle ajoute chaque jour férié à la liste non ordonnée (<ul>) holidayList.
- window.addEventListener() : Cette fonction écoute un événement spécifique, ici l'événement de chargement de la page ('load'), et exécute une fonction lorsque cet événement se produit.
Sauvegardez le fichier : Après avoir ajouté le code JavaScript, sauvegardez votre fichier.
Ouvrez le fichier dans un navigateur : Ouvrez le fichier jours-feries.html dans votre navigateur Web en faisant un double-clic dessus. Vous devriez voir la liste des jours fériés s'afficher automatiquement.

Corrigé

Une solution

TP - Consulter une BD de films

Mission : Créer une petite application qui affiche des informations sur les films en utilisant l'API gratuite The Open Movie Database (OMDb API).

Étapes

Inscrivez-vous sur OMDb API pour obtenir une clé API gratuite.

Cochez l'option "FREE! (1,000 daily limit)".
Créez un fichier films.html et écrivez la structure de base HTML.
Ajoutez un champ de recherche et un bouton pour soumettre une requête à l'API.
Utilisez fetch() pour envoyer une requête à l'API avec le titre du film saisi par l'utilisateur.

Vous pouvez bien-sûr consulter la Documentation de OMDb API et vous inspirer de l'Exercice pratique.
Affichez les résultats de la recherche sur la page.

Corrigé

Une solution

attention

Il s'agit d'un TP pour apprendre comment consommer une API REST en JavaScript.

Dans ce TP, votre clé d'API est stockée dans la page HTML, et donc accessible en consultant le code source de la page Web.

Donc pour des raisons de sécurité, il ne faut pas utiliser cet exemple en production.

astuce

Dépôt d'APIs publiques géré manuellement par des membres de la communauté.

https://github.com/public-apis/public-apis

Ce dépôt comprend une longue liste d'API publiques provenant de nombreux domaines que vous pouvez utiliser pour vos propres applications.

API avec JavaScript

Notions théoriques

Introduction à `fetch()` en JavaScript

Consommation d'une API publique

Exemple de consommation d'une API

Exercice pratique

Test de mémorisation/compréhension

Que renvoie la fonction `fetch()` en JavaScript ?

Quel est le but de la méthode `.then()` utilisée après un appel `fetch()` ?

Quel format de données est couramment renvoyé par les API publiques et facilement manipulable en JavaScript ?

TP - Consulter une BD des jours fériés

Étapes

Corrigé

TP - Consulter une BD de films

Étapes

Corrigé

Notions théoriques​

Introduction à fetch() en JavaScript​

Consommation d'une API publique​

Exemple de consommation d'une API​

Exercice pratique​

Test de mémorisation/compréhension​

Que renvoie la fonction `fetch()` en JavaScript ?

Quel est le but de la méthode `.then()` utilisée après un appel `fetch()` ?

Quel format de données est couramment renvoyé par les API publiques et facilement manipulable en JavaScript ?

TP - Consulter une BD des jours fériés​

Étapes​

Corrigé​

TP - Consulter une BD de films​

Étapes​

Corrigé​

Notions théoriques

Introduction à `fetch()` en JavaScript

Consommation d'une API publique

Exemple de consommation d'une API

Exercice pratique

Test de mémorisation/compréhension

TP - Consulter une BD des jours fériés

Étapes

Corrigé

TP - Consulter une BD de films

Étapes

Corrigé