Skip to content

fetch des APIs et serveur HTTP (09/02/26)

Fetch et APIs

Dans le cadre d'un TP, on a fait des appels à des APIs externes comme celle du CNAM ou encore openweathermap pour intégrer les données actuelles dans un script JS.

Pour faire des appels, on utlise la méthode Asynchrone du cours précédent qui nous permettra de faire des appels des APIs sans arrêter le programme en attendant la réponse. Une fonction nous permet de faire cet appel : fetch()

fetch() (Le coursier)

fetch à le rôle de coursier, c'est lui qui effectuera la requête HTTP (GET par défaut).

  • Ce que ça fait : Ça envoie un ping à une URL pour aller chercher des data.

  • Et ça renvoie une promesse en attendant la réponse de l'API

Pour traiter nos réponses proprement, on combine nos fetch avec le module json()

json() (Le traducteur)

Quand fetch revient, il te ramène un gros paquet brut (un Response object).

  • Ce que ça fait : Ça prend ce paquet et ça le transforme en Objet JavaScript utilisable (avec des accolades {} et tout).

  • Note : C'est aussi asynchrone, donc il faut un await devant aussi.

Exemple du TP

Dans une fonction async fetchCityInfo(), on essayera de fetch via cette fonction : 

// Attend de fetch les données d'une ville donnée par l'utilisateur via la variable cityName
const geoRes = await fetch(`https://geoservice.cnam.fr/api/cities?name=${encodeURIComponent(cityName)}`);

Puis on encode les données brutes reçues dans un joli tableau JSON : 

// La constante cities récupère le résultat geoRes et le range en JSON
const cities = await geoRes.json();

Plus tard, on refait un fetch de données avec une clé API pour openweathermap (cas concret en gros) : 

//Comme tout à l'heure, on fetch les données de l'API et on attend la réponse via await
const weatherRes = await fetch(`http://api.weatherapi.com/v1/current.json?q=${encodeURIComponent(cityName)}&key=****`);

Bravo, tu as fait un appel d'API et l'a rangé dans un beau tableau JSON.

Serveur HTTP