fetch()
Envoie une requête HTTP et renvoie une promesse avec la réponse du serveur (un objet Response).
- Renvoie
- Une promesse résolue avec un objet
Response.
Exemple
#const response = await fetch('data:application/json,{"name":"Léa","level":7}')
console.log(response.ok, response.status)
const user = await response.json()
console.log(`${user.name} est au niveau ${user.level}`)L’adresse data: contient la réponse directement dans l’adresse, donc elle fonctionne sans connexion à un serveur. Dans une vraie application, vous auriez à cet endroit une adresse d’API, par ex. "/api/users/7".
Définition et utilisation
#La fonction fetch() récupère des données depuis le réseau. Elle prend une adresse de ressource et un objet de configuration optionnel, et renvoie une promesse qui se résout avec un objet Response dès que les en-têtes de la réponse arrivent. Vous lisez le contenu séparément, avec des méthodes comme response.json() ou response.text(), qui renvoient elles aussi des promesses.
Un piège important : fetch() ne rejette sa promesse qu’en cas d’erreur réseau, par exemple une absence de connexion ou une requête bloquée. Les réponses avec un code 404 ou 500 sont pour elle des succès. Vérifiez donc toujours response.ok (il vaut true pour les codes de 200 à 299) ou response.status.
Le deuxième argument permet de changer la méthode (POST, PUT, DELETE), d’ajouter des en-têtes et d’envoyer un contenu dans le champ body, en général du JSON préparé avec JSON.stringify(). L’option signal permet d’interrompre la requête, par exemple après un délai dépassé.
Les exemples de cette page n’ont pas accès au réseau, c’est pourquoi le premier récupère une adresse data:, dans laquelle les données sont écrites directement. Avec une vraie API, le code ressemble exactement à ça, seule l’adresse change.
Syntaxe
#fetch(resource)
fetch(resource, options)Paramètres
#resource
chaîne de caractères, URL ou Request
L’adresse de la ressource, par ex."/api/courses"ou une URL complète.options
objet, optionnel
Les paramètres de la requête, entre autresmethod,headers,body,signaletcredentials.
Plus d’exemples
#async function loadCourses() {
const response = await fetch('/api/courses')
if (!response.ok) {
throw new Error(`Erreur HTTP : ${response.status}`)
}
return response.json()
}
try {
const courses = await loadCourses()
console.log(courses.length)
} catch (error) {
console.log(error.message)
}Erreur HTTP : 404
Cet exemple nécessite un vrai serveur, donc il ne s’exécute pas dans l’aperçu. Le résultat montre ce qui se passe quand le serveur répond avec un code 404.
const response = await fetch('/api/progress', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ lessonId: 12, score: 95 })
})
const result = await response.json()
console.log(result){ saved: true, points: 150 }Cet exemple nécessite un vrai serveur, donc il ne s’exécute pas dans l’aperçu. Le résultat est un exemple de réponse d’API.
try {
const response = await fetch('/api/ranking', { signal: AbortSignal.timeout(3000) })
console.log(response.status)
} catch (error) {
console.log(error.name)
}TimeoutError
Le résultat montre ce qui se passe quand le serveur ne répond pas dans les 3 secondes. La requête est alors interrompue, et fetch() rejette sa promesse.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Vérifiez toujours
response.ok. Les codes 404 et 500 ne rejettent pas la promesse renvoyée parfetch(). - En envoyant du JSON, définissez l’en-tête
Content-Type: application/jsonet convertissez les données en texte avecJSON.stringify(). - Le contenu de la réponse ne peut être lu qu’une seule fois. Un second appel à
response.json()sur la même réponse se terminera par une erreur.
Entrées associées
#- async functionDéclare une fonction asynchrone, qui renvoie toujours une promesse et peut utiliser le mot-clé await à l’intérieur.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- Promise.prototype.then()Enregistre une fonction appelée quand la promesse est résolue, et renvoie une nouvelle promesse, ce qui permet d’enchaîner les étapes.
- JSON.parse()Transforme une chaîne de caractères au format JSON en valeur JavaScript, comme un objet ou un tableau.
- JSON.stringify()Transforme une valeur JavaScript, comme un objet ou un tableau, en chaîne de caractères au format JSON.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.