async et await
Une fonction async permet de lire les étapes asynchrones dans l’ordre. await attend une Promise dans cette fonction seulement ; la page et le reste de JavaScript continuent.
Ce que suspend await
À await, la fonction rend provisoirement la main au navigateur. Les événements peuvent continuer. Une fois la Promise tenue, la fonction reprend au même endroit.
async renvoie toujours une Promise
Même si la fonction renvoie une chaîne, son appel produit une Promise tenue avec cette chaîne. Une erreur lancée rejette la Promise.
Lire le résultat après await
pour renvoie une Promise. serve écrit waiting, attend, puis reçoit lida tea.
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
Les sorties sont waiting, puis lida tea. Elles sont dans serve, mais la seconde arrive après la résolution.
L’appelant reçoit une Promise
serve() sans await ne fournit pas directement la boisson.
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
La sortie est true : ticket est une Promise. Lisez sa valeur avec await dans une autre fonction async, ou avec then.
Traiter un rejet avec try et catch
Le rejet d’une Promise attendue se comporte comme une erreur lancée à l’endroit de await. Placez l’opération dans try.
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
La sortie est no leaves. Les autres erreurs du même bloc try atteignent aussi ce catch.
Le reste de la page continue
Seule la fonction async courante est suspendue. Son appel renvoie immédiatement une Promise, donc le code synchrone suivant avance.
Exemple complet dans le navigateur
L’exemple note les étapes dans une fonction async. Un court minuteur résout la Promise, sans serveur.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
La ligne finale est waiting / lida tea / done. done est ajouté après l’écriture de la valeur attendue.
À vous
Modifiez lida, attendez le résultat, puis passez une chaîne vide et vérifiez que catch reçoit no leaves.
Erreurs fréquentes
N’attendez pas une chaîne prête d’un appel async. N’utilisez pas await dans une fonction ordinaire et ne croyez pas qu’il bloque toute la page.
À retenir
async renvoie toujours une Promise. await suspend uniquement cette fonction jusqu’au règlement de la Promise. Utilisez try/catch si elle peut échouer.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut