Utiliser des API externes
Récupérer des données d'autres services dans ton app
⏱ Estim. ~5 min
01 · Lire
La plupart des vraies applis n'existent pas en isolation. Elles parlent à d'autres services pour récupérer des données : une app météo appelle une API météo, une app sociale appelle une API d'authentification, une app de e-commerce appelle une API de paiement.
Une API (Application Programming Interface), c'est simplement une URL qui renvoie des données au lieu d'une page web. Quand tu visites un site, le navigateur reçoit du HTML. Quand ton programme appelle une API, il reçoit du JSON — des données structurées que ton programme peut utiliser.
Tu as appris les API au niveau 5. Maintenant on les utilise dans du vrai code.
💡 Imagine çaSi ton serveur est la cuisine d'un restaurant, les API externes sont les fournisseurs. Tu ne cultives pas tes propres tomates — tu appelles le fournisseur (l'API), tu passes commande (la requête), et il livre (la réponse). Si le fournisseur ferme (l'API est down), il te faut un plan B (gestion d'erreurs).
02 · Exemple de code
Voici une route qui récupère des données d'une API externe. Lis-la et remarque trois patterns clés : async/await, fetch, try/catch.
Exemple : route API
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({
setup: joke.setup,
punchline: joke.punchline
});
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});
Remarque trois choses : (1) async/await te permet d'attendre des données externes sans geler le serveur. Le mot-clé 'await' met en pause cette fonction jusqu'à l'arrivée des données, mais les autres requêtes continuent d'être traitées. (2) fetch envoie une requête HTTP à l'API externe. (3) try/catch gère les erreurs proprement — si l'API de blagues est down, ton serveur renvoie quand même un message d'erreur utile au lieu de planter.
03 · Lire
Quand tu travailles avec des API externes, certains concepts reviennent tout le temps. Les comprendre te sauve des erreurs courantes.
Points clés
- async/await — la façon d'attendre des données externes sans bloquer le serveur
- Clé API — l'authentification pour les API payantes ou privées (mets-les dans .env !)
- Rate limit — l'API limite le nombre de requêtes par minute
- Gestion d'erreurs — toujours prévoir un fallback en cas d'API down
04 · Pratique réelle
Essaie d'ajouter cette route API à ton serveur Express du niveau 7. Elle appelle une API de blagues gratuite sans clé API — parfait pour s'entraîner.
// Add this to your app.js
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({ setup: joke.setup, punchline: joke.punchline });
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});05 · Compléter
Pour gérer les erreurs d'API en JavaScript, on enveloppe l'appel fetch dans un bloc _____/catch.
06 · Quiz
Pourquoi envelopper un appel d'API dans un bloc try/catch ?
- JavaScript exige try/catch pour toutes les fonctions
- Pour faire tourner le code plus vite
- Pour empêcher l'appel de l'API trop souvent
- Pour gérer proprement les erreurs si l'API tombe
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.