02. Fetch

Explication des commandes fetch

fetch(url, options)

• C’est la fonction principale.

• Elle envoie une requête HTTP vers une URL.

• options permet de préciser la méthode, les headers, le body, etc.

GET simple

fetch('https://api.example.com/data')

Envoie une requête GET (par défaut) pour récupérer des données.

.then(res => { ... })

Exécute du code quand la réponse arrive.

if (!res.ok) throw new Error(...)

Vérifie si la réponse est correcte (statut 200–299).

return res.json()

Convertit la réponse en JSON utilisable.

.catch(err => ...)

Attrape les erreurs réseau ou de code.

POST JSON

method: 'POST'

Indique qu’on envoie des données.

headers: { 'Content-Type': 'application/json' }

Précise qu’on envoie du JSON.

body: JSON.stringify({...})

Convertit un objet JS en texte JSON pour l’envoyer.

PUT / PATCH / DELETE

method: 'PUT'

Remplace entièrement une ressource.

method: 'PATCH'

Modifie partiellement une ressource.

method: 'DELETE'

Supprime une ressource.

Query parameters

new URLSearchParams({ page: 2, limit: 10 })

Crée proprement une chaîne ?page=2&limit=10.

Différents types de réponses

res.json()

Convertit en JSON.

res.text()

Convertit en texte brut.

res.blob()

Pour des fichiers (images, PDF…).

res.arrayBuffer()

Pour des données binaires bas niveau.

async / await

const res = await fetch(...)

Écrit le code de manière plus lisible, comme si c’était synchrone.

try { ... } catch { ... }

Gère les erreurs proprement.

Timeout avec AbortController

const controller = new AbortController()

Permet d’annuler une requête.

setTimeout(() => controller.abort(), 5000)

Annule la requête après 5 secondes.

signal: controller.signal

Connecte le contrôleur à fetch.

FormData

const formData = new FormData()

Sert à envoyer des fichiers ou des formulaires.

formData.append('file', file)

Ajoute un champ au formulaire.

Pas besoin de Content-Type, il est géré automatiquement.

Headers & Auth

headers: { Authorization: 'Bearer TOKEN' }

Ajoute un token d’authentification.

Lire le statut et les headers

res.status

Code HTTP (200, 404, 500…).

res.headers.get('Content-Type')

Récupère un header spécifique.