Front-end · 6 mondes · 18 étapes

JavaScript

Le langage du web : types, fonctions, tableaux, objets et asynchrone.

Progression

0 %

0/18 étapes terminées

← Décryptages

Avancé · 11 min de lecture

L'asynchrone

La boucle d'événements, sans mystère

1Définition

JavaScript exécute une seule chose à la fois. Les opérations longues (réseau, minuteries) sont déléguées, et leur suite est placée dans une file d'attente traitée quand le code en cours est terminé. Les promesses représentent ces résultats à venir, et async / await permet de les écrire de haut en bas.

2Principes fondamentaux

01

Le code synchrone passe d'abord

Une fonction programmée, même à 0 ms, attend que le code en cours soit terminé.

02

await suspend une fonction, pas la page

L'interface continue de répondre pendant que la fonction async attend.

03

Paralléliser l'indépendant

Promise.all lance tout en même temps ; des await successifs attendent l'un après l'autre.

04

Rattraper au plus près

Un .catch sur la seule promesse fragile évite que Promise.all échoue en entier.

3Exemples pratiques

Séquentiel contre parallèle

Exemple
1// Séquentiel : 300 ms2const a = await charger(1);3const b = await charger(2);4const c = await charger(3);5 6// Parallèle : 100 ms7const [x, y, z] = await Promise.all([charger(1), charger(2), charger(3)]);

Même résultat, trois fois plus rapide, parce que les trois appels ne dépendent pas les uns des autres.

Une panne contenue

Exemple
1const [profil, classement] = await Promise.all([2  charger("profil"),3  charger("classement").catch(() => "indisponible"),4]);

Le classement peut tomber sans emporter le profil avec lui.

4Erreurs courantes

Oublier await

À éviter

const profil = chargerProfil(7);console.log(profil.nom);

À faire

const profil = await chargerProfil(7);

Pourquoi : Sans await, profil est une promesse, pas le résultat : profil.nom vaut undefined.

await dans une boucle par réflexe

À éviter

for (const id of ids) {  await charger(id);}

À faire

await Promise.all(ids.map(charger));

Pourquoi : Les appels indépendants s'enchaînent inutilement.

Promesse rompue ignorée

À éviter

charger(); // sans catch

À faire

charger().catch(signaler);

Pourquoi : Une promesse rompue sans gestionnaire produit une erreur non traitée, souvent invisible.

5Subtilités à connaître

  • ◆Les promesses passent par la file des micro-tâches, prioritaire sur celle des minuteries : un .then s'exécute avant un setTimeout(f, 0) programmé plus tôt.
  • ◆Promise.allSettled attend tout sans jamais échouer et rend l'état de chaque promesse.
  • ◆fetch ne rompt sa promesse que sur une panne réseau : une réponse 404 ou 500 est une promesse tenue, à vérifier avec response.ok.

6Vérifie ta compréhension

Question 1/3

Score 0

console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C");

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.