Asynchrone JS

Promises et async/await pour le code non-bloquant

Section 1

Le problème du code asynchrone

Step 1

Pourquoi asynchrone ?

JavaScript est mono-thread — il ne peut exécuter qu'une chose à la fois. Les opérations I/O (réseau, fichiers, timers) seraient bloquantes sans l'asynchrone.

snippet.javascript

javascript

1// ❌ Synchrone : bloque tout
2// (impossible en JS browser de toute façon)
3const data = readFileSync("data.json"); // BLOQUE
4console.log("Jamais atteint pendant la lecture...");
5
6// ✅ Asynchrone : non-bloquant
7fetch("/api/users")
8  .then(response => response.json())
9  .then(users => console.log(users))
10  .catch(err => console.error(err));
11
12console.log("Exécuté AVANT la réponse du fetch");

Step 2

Créer une Promise

Une Promise représente une valeur future. Elle est dans l'un de ces états : pending, fulfilled ou rejected.

snippet.javascript

javascript

1// ❌ Synchrone : bloque tout
2// (impossible en JS browser de toute façon)
3const data = readFileSync("data.json"); // BLOQUE
4console.log("Jamais atteint pendant la lecture...");
5
6// ✅ Asynchrone : non-bloquant
7fetch("/api/users")
8  .then(response => response.json())
9  .then(users => console.log(users))
10  .catch(err => console.error(err));
11
12console.log("Exécuté AVANT la réponse du fetch");

Section 2

async/await — syntaxe moderne

Step 3

async/await sur les Promises

async/await est du sucre syntaxique sur les Promises. Le code a l'air synchrone tout en étant non-bloquant. Une fonction `async` retourne toujours une Promise.

Step 4

Gestion d'erreurs

Avec async/await, on utilise try/catch pour gérer les erreurs — exactement comme le code synchrone.

snippet.javascript

javascript

1// ❌ Synchrone : bloque tout
2// (impossible en JS browser de toute façon)
3const data = readFileSync("data.json"); // BLOQUE
4console.log("Jamais atteint pendant la lecture...");
5
6// ✅ Asynchrone : non-bloquant
7fetch("/api/users")
8  .then(response => response.json())
9  .then(users => console.log(users))
10  .catch(err => console.error(err));
11
12console.log("Exécuté AVANT la réponse du fetch");

Topics and skills covered

JavaScript
Promises
Async/Await
Event Loop

Fonctions, closures et portée

Ch.1