L'Atelier du Web

Utiliser une API

Guides prérequis

Une API (pour Application Programming Interface) est un service qui permet de récupérer des données depuis un autre site ou serveur. Par exemple, tu pourrais utiliser l’API d’un site de météo, de citations aléatoires, ou de données sur les Pokémon (c’est ce qu’on fera bientôt !).

Pour communiquer avec une API, tu envoies une requête à une adresse URL, et l’API te renvoie une réponse contenant les données demandées. En JavaScript, on utilise la fonction fetch() pour faire des requêtes.

Commençons par un exemple simple : une API qui renvoie un « fun fact » aléatoire ! 🎲

Console

Exécute plusieurs fois le code pour obtenir des fun facts différents !

fetch() est une opération asynchrone : elle peut prendre du temps avant d’obtenir une réponse. On utilise le mot-clé await pour attendre la réponse avant de continuer, sans quoi la variable response contiendrait une « promesse » mais pas les données finales.

Enfin, .json() permet de transformer la réponse en un objet utilisable en JavaScript. Cela nécessite que l’API utilise le format JSON, qui est très courant.

Les paramètres d’URL

Les URL peuvent parfois contenir des paramètres, qui sont des informations supplémentaires envoyées au serveur. On les ajoute à la fin de l’URL. Ils commencent par un ? et sont séparés par un &.

https://example.com/products?category=books&sort=price

Dans cet exemple, category et sort sont des paramètres qui sont envoyés au serveur lorsqu’on accède à la page /products. Le serveur peut ensuite utiliser ces paramètres pour changer le contenu de la page ou effectuer des actions.

Revenons à l’API des fun facts. Elle accepte le paramètre index pour obtenir un fait précis parmi les 20 disponibles. Essaie de l’utiliser !

Dans le code ci-dessus, remplace l’URL de la requête par /api/fun-fact?index=1 pour obtenir le deuxième fun fact. Essaie avec d’autres valeurs entre 0 et 19.

Récupérer des objets

L’API des fun facts renvoie un simple string (texte), mais généralement, les APIs renvoient plusieurs données organisées dans un objet.

Voici un nouvel exemple d’API permettant d’obtenir un nom de personnage fantastique. 🧙 Tu recevras un objet contenant trois strings aléatoires :

JS
{
  title: "Archimage",
  name: "Elzéria",
  place: "du Fort des Échos"
}

Tu pourras ensuite assembler ces valeurs pour afficher le nom complet : « Archimage Elzéria du Fort des Échos ».

Console
  1. Remplace l’URL de la requête par /api/fantasy-name pour obtenir un nom fantastique.
  2. Ajoute un console.log() pour afficher le nom complet, en utilisant les propriétés de l’objet renvoyé.
Bonjour ! Je suis un assistant IA qui peut te donner des conseils pour réussir les exercices et améliorer ton code. Utilise le bouton « J'ai besoin d'aide » pour m'appeler !