Les promesses, async/await et l'API fetch avec une frise pas à pas de l'event loop et 15 exemples à modifier et exécuter : JSON, formulaires, erreurs, requêtes parallèles, AbortController et nouvelles tentatives.
Une promesse représente un résultat qui arrive plus tard. Les fonctions async renvoient des promesses, et await met cette fonction en pause jusqu'à ce qu'une promesse soit réglée. fetch(url) renvoie la promesse d'une Response : vérifiez response.ok, puis faites await response.json(). Entourez les await de try et catch, utilisez Promise.all pour les requêtes parallèles, et AbortController pour annuler.
Le schéma dont la plupart des pages ont besoin
Commencez par la frise pour comprendre pourquoi du code situé après un await peut s'exécuter avant lui. Modifiez ensuite n'importe quel exemple : il se relance aussitôt. Les requêtes utilisent ici des URL data: ou des serveurs simulés, donc rien ne quitte votre navigateur.
Aucune dans ce qu'elles permettent de faire : async/await repose sur les promesses. Une fonction async renvoie toujours une promesse, et await en extrait la valeur. Le code se lit comme du code normal, étape par étape, ce qui facilite la gestion des erreurs avec try et catch.
fetch considère toute réponse HTTP comme une requête réussie, puisque le serveur a bien répondu. Il ne rejette qu'en cas d'échec réseau ou de requête annulée. Vérifiez vous-même response.ok ou response.status.
Les callbacks des promesses vont dans la file des microtâches, qui est entièrement vidée après le script en cours. Le callback d'un minuteur est une tâche, qui attend le tour suivant de l'event loop.
Créez un AbortController, passez controller.signal dans les options de fetch, et appelez controller.abort(). La promesse de fetch est rejetée avec une erreur nommée AbortError.
Oui, dans les modules JavaScript (script type="module" ou tout module ES bundlé). Dans les scripts classiques, entourez le code d'une fonction async.
Les lignes synchrones s'exécutent d'abord, puis chaque callback de promesse en file (microtâches), puis le minuteur (une tâche). Changez l'ordre et relancez.
Une promesse ne se règle qu'une fois : resolve donne une valeur, reject donne une erreur. then et catch s'exécutent plus tard, jamais immédiatement.
await ne met en pause que la fonction async qui le contient. La ligne qui suit l'appel à main() s'exécute avant que main ne se termine.
Dans une fonction async, un await rejeté lève une erreur, donc try et catch classiques fonctionnent. finally est l'endroit où masquer un indicateur de chargement.
fetch renvoie une Response ; .json() lit et analyse le corps, ce qui demande un second await. Celui-ci utilise une URL data: pour fonctionner hors ligne.
fetch ne rejette que lorsque la requête ne peut pas être faite du tout (hors ligne, bloquée, URL invalide). Une 404 ou une 500 se résout normalement avec ok à false, alors vérifiez-le toujours.
FormData lit chaque champ nommé. Ici la requête est construite mais pas envoyée, et son corps est affiché pour que vous voyiez exactement ce que recevrait un serveur.
Envoyez du JSON en le convertissant en chaîne et en définissant vous-même l'en-tête Content-Type ; fetch ne fait ni l'un ni l'autre pour les objets simples.
Quelle fonction de promesse utiliser
Attendre un appel à la fois additionne les temps d'attente. Les lancer tous puis faire await Promise.all n'attend que le plus lent.
Promise.all rejette dès qu'une promesse échoue. allSettled attend toutes les promesses et vous dit lesquelles ont réussi, ce qui convient aux tableaux de bord aux widgets indépendants.
Lancer des centaines de requêtes en même temps peut déclencher des limites de débit. Ce petit pool en garde au plus trois en cours.
Passez controller.signal à fetch et appelez abort() pour l'arrêter. La promesse est rejetée avec une AbortError, que l'on ignore généralement.
AbortSignal.timeout(ms) crée un signal qui s'annule tout seul. Avec fetch, l'erreur s'appelle TimeoutError, ce qui permet de la distinguer d'une annulation par l'utilisateur.
Ne réessayez que les erreurs passagères, comme un dépassement de délai ou une 503, et attendez plus longtemps à chaque fois pour qu'un serveur en difficulté puisse se rétablir.
Attendez une pause dans la frappe, et annulez la requête précédente quand une nouvelle démarre, pour qu'une ancienne réponse lente ne puisse jamais écraser une plus récente.
Vous devez lire une réponse ? Collez-la dans le
Pile d'appels
Microtâches
File des tâches
Console
Étape {i} sur {n}.
Retour
Étape suivante
Pause
Lecture
Réinitialiser
Commencer gratuitement · Sans carte bancaire