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.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. 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 pas f tout de suite : il la met en file, et elle attend que le code en cours se termine. Les .then des 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 B
    • A B C D
    • A D B C
    • A C D B
    Voir la réponse

    A D C B

    Le code synchrone passe d'abord (A, D). Les micro-tâches (le .then, C) passent avant les tâches (le setTimeout, B), même avec un délai de 0 ms.

  • Le serveur répond 404 : la promesse de fetch est …, 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 fetch est 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 écrit if (!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 catch qui entoure le fetch ne se déclenche pas : le code continue et plante plus loin. Quelle est la cause et la réparation ?

    • fetch ne rejette qu'en cas de panne réseau ; tester response.ok et lancer une erreur
    • Le catch doit être remplacé par un finally qui reçoit le code d'erreur
    • Le serveur doit répondre 500 : un 404 n'est pas une erreur
    • Il faut ajouter await devant catch pour qu'il attende la réponse
    Voir la réponse

    fetch ne rejette qu'en cas de panne réseau ; tester response.ok et lancer une erreur

    Pour fetch, un 404 est une réponse reçue : la promesse est tenue. Il faut tester if (!response.ok) throw new Error(response.status) pour que l'erreur HTTP passe par le catch.