Dialoguer avec un serveur : fetch

Cours · JavaScript : rendre le Web interactif (école d'ingénieur), chapitre 10 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun

Au chapitre précédent, la Librairie du Campus a appris à attendre ses livres : le catalogue affiche « Chargement du catalogue… », puis les cartes. Mais l'attente était simulée, et les livres venaient toujours du fichier livres.js. Il est temps de les demander à un vrai serveur : celui qui connaît le stock du jour, qui enregistre les commandes, et que la Librairie pourra mettre à jour sans toucher au code des pages.

Le navigateur parle aux serveurs en HTTP, et JavaScript lui fait envoyer des requêtes avec une seule fonction, fetch, qui renvoie une promesse. Tout ce que le chapitre 9 a appris s'applique : await, try, Promise.all. Ce chapitre ajoute ce qui est propre au réseau : lire une réponse et son statut, distinguer les différentes pannes, envoyer des données, abandonner une requête devenue inutile, et comprendre pourquoi le navigateur refuse parfois de livrer une réponse que le serveur a pourtant envoyée.

Objectifs du chapitre

Lire une requête et une réponse HTTP : méthode, adresse, en-têtes, corps, code de statut.
Lancer le serveur du livre et interroger son API JSON.
Envoyer une requête avec fetch, vérifier response.ok, lire le corps JSON.
Traiter les trois sortes d'échecs : réseau, statut HTTP, délai dépassé ; les traduire en messages pour l'utilisateur.
Construire une adresse avec URL et URLSearchParams ; envoyer du JSON en POST.
Annuler une requête avec AbortController ; éviter la « course » entre deux recherches.
Expliquer la politique de même origine et CORS.
Donner à une page ses états : chargement, erreur avec « Réessayer », données.

10.1 HTTP en bref

Le livre HTML a présenté HTTP du point de vue du navigateur qui charge une page. Regardons maintenant un échange de près. L'outil en ligne de commande curl envoie une requête et affiche la réponse ; l'option -i montre ses en-têtes.


$ curl -i http://localhost:8000/api/livres/9782956300069
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Date: Fri, 02 Oct 2026 16:26:56 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

{"isbn":"9782956300069","titre":"L’Étranger","auteur":"A. Camus","rayon":"Littérature","prix":7.9,"image":"images/etranger.svg","nouveaute":false,"stock":9}

La requête envoyée par curl (affichée avec l'option -v) tient en quelques lignes :


GET /api/livres/9782956300069 HTTP/1.1
Host: localhost:8000
User-Agent: curl/8.7.1
Accept: */*

Définition 10.1Requête et réponse HTTP

Une requête HTTP comporte une méthode (GET, POST…), un chemin (ici, l'adresse du livre sur le serveur), des en-têtes (Nom: valeur) et, pour certaines méthodes, un corps. La réponse comporte un code de statut à trois chiffres et son libellé (200 OK), des en-têtes, et un corps. L'en-tête Content-Type dit ce que contient le corps : ici du JSON (chapitre 5).

méthode	usage	corps de la requête
`GET`	lire une ressource	aucun
`POST`	créer (une commande…)	les données
`PUT` / `PATCH`	remplacer / modifier	les données
`DELETE`	supprimer	aucun

statut	signification	exemple à la Librairie
200 OK	succès	la liste des livres
201 Created	ressource créée	commande enregistrée
400 Bad Request	requête refusée (données invalides)	quantité négative
404 Not Found	ressource inconnue	ISBN inexistant
500 Internal Server Error	le serveur a échoué	panne
503 Service Unavailable	serveur surchargé, momentanément	maintenance

Retenir la famille suffit le plus souvent : 2xx succès, 3xx redirection, 4xx erreur du client (la requête est en cause, la renvoyer telle quelle échouera encore), 5xx erreur du serveur (réessayer plus tard peut réussir).

Méthode — l'onglet Réseau des outils de développement

L'onglet Network (Réseau) des outils de développement (F12) liste toutes les requêtes d'une page. En filtrant sur Fetch/XHR, on ne garde que celles du JavaScript. Un clic sur une ligne montre la requête (Headers), le corps reçu (Response, ou Preview pour du JSON mis en forme) et la chronologie (Timing). Le menu No throttling simule une connexion lente (« Slow 4G ») ou absente (« Offline ») : c'est le moyen le plus simple de voir les états de chargement et d'erreur d'une page.

10.2 Le serveur du livre

Pour dialoguer avec un serveur, il en faut un. Le livre en fournit un petit, écrit en JavaScript pour Node, sans aucune dépendance : outils/serveur.mjs. On le lance depuis le dossier du livre :


$ node outils/serveur.mjs
Librairie du Campus : http://localhost:8000/
  délai 0 ms, panne 0, CORS désactivé

Il reste en service jusqu'à ce qu'on l'arrête (Ctrl-C), et écrit chaque requête reçue dans le terminal. Il fait deux choses.

Il sert les fichiers du livre. L'adresse

http://localhost:8000/code/ch10/librairie/catalogue.html

ouvre la Librairie de ce chapitre. Ouvrir les pages par le serveur, et non en double-cliquant sur le fichier, est indispensable : une page ouverte depuis le disque (adresse file://) n'a le droit ni de charger un module JavaScript, ni d'appeler une API.

Il offre une API JSON, c'est-à-dire des adresses pensées pour les programmes, pas pour les humains :

La suite du cours est sur Adloun

Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.

Lire la suite du cours

En accès libre, sans inscription.

Exercices corrigés de ce chapitre

Lire la suite du cours →