Qu'est-ce qu'une API ?
Une API (Application Programming Interface) est un moyen pour des programmes de communiquer entre eux. Quand votre site a besoin de données (météo, utilisateurs, produits), il les demande à un serveur via une API.
Dans notre métaphore du bâtiment : l'API, c'est le téléphone. Votre bâtiment appelle le fournisseur pour commander des matériaux, et le fournisseur répond avec ce qu'il a en stock.
Une requête API, c'est :
- Vous envoyez une requête (demande) à une URL
- Le serveur traite et envoie une réponse (souvent en JSON)
- Vous utilisez les données dans votre page
fetch() — faire une requête
fetch() est la méthode JavaScript native pour appeler une API :
fetch("https://jsonplaceholder.typicode.com/users/1")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data.name); // "Leanne Graham"
});fetch() retourne une Promise — un objet qui représente une opération qui va se terminer plus tard. .then() s'exécute quand la réponse arrive.
async/await — la syntaxe moderne
async/await rend le code asynchrone lisible comme du code normal :
async function chargerUtilisateur() {
const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
const data = await response.json();
console.log(data.name);
}
chargerUtilisateur();await met le code en pause jusqu'à ce que la Promise soit résolue. async est obligatoire devant la fonction qui utilise await.
JSON — le format des API
JSON (JavaScript Object Notation) est le format standard des API. C'est très similaire aux objets JavaScript :
// Objet JavaScript → texte JSON
const obj = { nom: "Alice", age: 25 };
const texte = JSON.stringify(obj); // '{"nom":"Alice","age":25}'
// Texte JSON → objet JavaScript
const obj2 = JSON.parse(texte); // { nom: "Alice", age: 25 }Gestion des erreurs : try/catch
Les requêtes réseau peuvent échouer (pas d'internet, serveur en panne). Utilisez try/catch pour gérer les erreurs :
async function charger() {
try {
const response = await fetch("https://api.exemple.com/data");
if (!response.ok) {
throw new Error("Erreur HTTP : " + response.status);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Problème :", error.message);
}
}Règle d'or : vérifiez toujours response.ok et entourez fetch de try/catch.
What is an API?
An API (Application Programming Interface) is a way for programs to communicate with each other. When your site needs data (weather, users, products), it requests it from a server via an API.
In our building metaphor: the API is the telephone. Your building calls the supplier to order materials, and the supplier responds with what's in stock.
An API request is:
- You send a request to a URL
- The server processes it and sends a response (usually JSON)
- You use the data in your page
fetch() — making a request
fetch() is the native JavaScript method to call an API:
fetch("https://jsonplaceholder.typicode.com/users/1")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data.name); // "Leanne Graham"
});fetch() returns a Promise — an object representing an operation that will complete later. .then() runs when the response arrives.
async/await — the modern syntax
async/await makes asynchronous code read like normal code:
async function loadUser() {
const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
const data = await response.json();
console.log(data.name);
}
loadUser();await pauses the code until the Promise resolves. async is required before the function that uses await.
JSON — the API format
JSON (JavaScript Object Notation) is the standard format for APIs. It's very similar to JavaScript objects:
// JavaScript object → JSON text
const obj = { name: "Alice", age: 25 };
const text = JSON.stringify(obj); // '{"name":"Alice","age":25}'
// JSON text → JavaScript object
const obj2 = JSON.parse(text); // { name: "Alice", age: 25 }Error handling: try/catch
Network requests can fail (no internet, server down). Use try/catch to handle errors:
async function loadData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Problem:", error.message);
}
}Golden rule: always check response.ok and wrap fetch in try/catch.
Copiez ce prompt dans Claude ou ChatGPT :
Explique-moi les Promises en JavaScript comme si j'étais au restaurant : la commande, l'attente, le plat servi ou l'erreur. Puis montre un exemple avec fetch et async/await.
L'IA a oublié d'appeler .json() sur la réponse. Les données ne sont pas parsées. Ajoutez await response.json().
fetch() ?JSON.parse() ?try/catch avec fetch ?async devant une fonction ?