Les requêtes asynchrones en JavaScript
fetch, les promesses (then, catch, finally), async et await, l'ordre d'exécution du code asynchrone et le traitement des erreurs réseau et HTTP.
- 26 cartes
- 4 thèmes
- Gratuit
Le programme, thème par thème
Le poids de chaque thème suit celui que lui donne l'examen.
- Notions
- Questions
- Ranger et relier
- Mises en situation
Quelques cartes du deck
Boucle d'événements : de quoi s'agit-il ?
Voir la réponse
Mécanisme qui exécute le code d'un seul fil, puis traite à tour de rôle les tâches en attente : d'abord toutes les micro-tâches, puis la tâche suivante.
Un
setTimeout(f, 0)n'exécute pasftout de suite : il la met en file, et elle attend que le code en cours se termine. Les.thendes promesses passent avant elle.Dans quel ordre s'affichent les lettres ?
```javascript
console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');`A D C BA B C DA D B CA C D B
Voir la réponse
A D C BLe code synchrone passe d'abord (
A,D). Les micro-tâches (le.then,C) passent avant les tâches (lesetTimeout,B), même avec un délai de 0 ms.Le serveur répond 404 : la promesse de
fetchest …, et c'est la propriété … de la réponse, ici fausse, qui signale le problème.Voir la réponse
Le serveur répond 404 : la promesse de
fetchest tenue, et c'est la propriété ok de la réponse, ici fausse, qui signale le problème.Pour traiter un code d'erreur dans le
catch, on écritif (!response.ok) throw new Error(response.status): l'erreur HTTP devient alors une promesse rompue.Promesse : de quoi s'agit-il ?
Voir la réponse
Objet qui représente un résultat à venir : il est d'abord en attente, puis il est tenu avec une valeur ou rompu avec une erreur, et ne change plus ensuite.
Les trois états sont pending, fulfilled et rejected. On récupère la valeur avec
.then, l'erreur avec.catch.Le serveur répond 404, mais le bloc
catchqui entoure lefetchne se déclenche pas : le code continue et plante plus loin. Quelle est la cause et la réparation ?fetchne rejette qu'en cas de panne réseau ; testerresponse.oket lancer une erreur- Le
catchdoit être remplacé par unfinallyqui reçoit le code d'erreur - Le serveur doit répondre 500 : un 404 n'est pas une erreur
- Il faut ajouter
awaitdevantcatchpour qu'il attende la réponse
Voir la réponse
fetchne rejette qu'en cas de panne réseau ; testerresponse.oket lancer une erreurPour
fetch, un 404 est une réponse reçue : la promesse est tenue. Il faut testerif (!response.ok) throw new Error(response.status)pour que l'erreur HTTP passe par lecatch.