Promesses, async et await

Charger des données, attendre un clic, patienter une seconde : ces opérations prennent du temps. JavaScript ne s'arrête pas pour les attendre ; il continue, et réagit quand elles se terminent.

Les minuteurs

setTimeout(() => console.log("plus tard"), 1000);   // dans 1000 ms
console.log("tout de suite");

Affiche « tout de suite », puis « plus tard ». setInterval répète ; clearTimeout et clearInterval annulent.

Ici, le temps est simulé : attendre une minute ne prend aucun temps réel, et l'ordre des événements est toujours le même.

Les promesses

Une promesse représente un résultat qui n'existe pas encore. Elle finira tenue (avec une valeur) ou rompue (avec une erreur).

function attendre(ms) {
    return new Promise((resoudre) => setTimeout(resoudre, ms));
}

attendre(500).then(() => console.log("500 ms plus tard"));

async et await

await attend la promesse sans bloquer le reste du programme ; il ne s'utilise que dans une fonction async, qui renvoie elle-même une promesse.

async function demarrer() {
    console.log("Préparation...");
    await attendre(1000);
    console.log("Prêt !");
}

Les erreurs se rattrapent avec try/catch, comme d'habitude. Une promesse rompue que personne ne rattrape est signalée comme une erreur.

Attendre plusieurs choses à la fois

const [profil, messages] = await Promise.all([chargerProfil(), chargerMessages()]);

Les deux chargements se font en même temps : on attend le plus long, pas la somme des deux. Dans une boucle, un await par tour fait au contraire tout l'un après l'autre.