async function
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Une fonction asynchrone est une fonction précédée par le mot-cléasync, et qui peut contenir le mot-cléawait.async etawait permettent un comportement asynchrone, basé sur une promesse (Promise), écrite de façon simple, et évitant de configurer explicitement les chaînes de promesse.
Les fonctions asynchrones peuvent également être définies comme desexpressions.
Exemple interactif
function resolveAfter2Seconds() { return new Promise((resolve) => { setTimeout(() => { resolve("resolved"); }, 2000); });}async function asyncCall() { console.log("calling"); const result = await resolveAfter2Seconds(); console.log(result); // Expected output: "resolved"}asyncCall();Syntaxe
async function name([param[, param[, …param]]]) { instructions}Paramètres
nameLe nom de la fonction.
paramLe nom d'un argument à passer à la fonction.
instructionsLes instructions qui composent le corps de la fonction.
Valeur de retour
Une promesse (Promise) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.
Description
Une fonctionasync peut contenir une expressionawait qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passéePromise. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
Le mot-cléawait est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exceptionSyntaxError.
Note :Lorsqu'une fonction asynchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonctionasync).
Note :Le but des fonctionsasync/await est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à descallbacks structurés,async/await est semblable à la combinaison des générateurs et des promesses.
Exemples
Exemple simple
var resolveAfter2Seconds = function () { console.log("Initialisation de la promesse lente"); return new Promise((resolve) => { setTimeout(function () { resolve("lente"); console.log("La promesse lente est terminée"); }, 2000); });};var resolveAfter1Second = function () { console.log("Initialisation de la promesse rapide"); return new Promise((resolve) => { setTimeout(function () { resolve("rapide"); console.log("La promesse rapide est terminée"); }, 1000); });};var sequentialStart = async function () { console.log("==Début séquentiel=="); // 1. L'exécution atteint ce point quasi-instantanément const lente = await resolveAfter2Seconds(); console.log(lente); // 2. cela s'exécute 2s après 1. const rapide = await resolveAfter1Second(); console.log(rapide); // 3. cela s'exécute 3s après 1.};var concurrentStart = async function () { console.log("==Début concurrentiel avec await=="); const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement const rapide = resolveAfter1Second(); // le minuteur démarre immédiatement // 1. L'exécution atteint ce point quasi-instantanément console.log(await lente); // 2. s'exécute 2s après 1. console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2., // car "rapide" est déjà résolue};var concurrentPromise = function () { console.log("==Début concurrentiel avec Promise.all=="); return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then( (messages) => { console.log(messages[0]); // lente console.log(messages[1]); // rapide }, );};var parallel = async function () { console.log("==Exécution parallèle avec await Promise.all=="); // Démarre 2 tâches en parallèle et on attend que les deux soient finies await Promise.all([ (async () => console.log(await resolveAfter2Seconds()))(), (async () => console.log(await resolveAfter1Second()))(), ]);};// Cette fonction ne gère pas les erreurs// voir les avertissement ci-après !var parallelPromise = function () { console.log("==Exécution parallèle avec Promise.then=="); resolveAfter2Seconds().then((message) => console.log(message)); resolveAfter1Second().then((message) => console.log(message));};sequentialStart(); // après 2 secondes, "lente" est affichée, après une// autre seconde, c'est "rapide" qui est affichée// on attend que l'étape précédente soit terminéesetTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"// on attend à nouveausetTimeout(concurrentPromise, 7000); // identique à concurrentStart// on attend à nouveausetTimeout(parallel, 10000); // réellement parallele : après 1 seconde,// affiche "rapide" et après une autre seconde// affiche "lente"// on attend à nouveausetTimeout(parallelPromise, 13000); // identique à parallelawait et l'exécution parallèle
DanssequentialStart, l'exécution est arrêtée pendant deux secondes avant le premierawait puis encore une autre seconde avant le deuxièmeawait. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.
AvecconcurrentStart, les deux minuteurs sont créés puis attendus derrière unawait Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.Toutefois, les appels utilisantawait sont exécutés séquentiellement et la deuxième instruction avecawait attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier.
Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliserawait Promise.all([job1(), job2()]) comme illustré ci-avant avecparallel.
async/await,Promise.prototype.then() et la gestion des erreurs
La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisentasync se prêtent mieux à la gestion des erreurs.
concurrentStart etconcurrentPromise sont fonctionnellement équivalentes.AvecconcurrentStart, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. PourconcurrentPromise cela signifie qu'il faut renvoyer la promesse dePromise.all([]).then().
Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avecasync) qui gobent des erreurs involontairement. Si on considère la fonctionparallel ci-avant, s'il n'y avait eu aucunawait oureturn pour le résultat dePromise.all([]), aucune erreur n'aurait été propagée.Bien que l'exempleparallelPromise paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser unreturn Promise.all([]) analogue.
Réécrire une chaîne de promesses avec une fonction asynchrone
Lorsqu'on utilise une API qui renvoie des promesses (Promise), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :
function getProcessedData(url) { return downloadData(url) // renvoie une promesse .catch((e) => { return downloadFallbackData(url); // renvoie une promesse }) .then((v) => { return processDataInWorker(v); // renvoie une promesse });}Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :
async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(url); } return processDataInWorker(v);}On voit dans l'exemple précédent qu'il n'y a pas deawait pour l'instructionreturn car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel àPromise.resolve.
Différences entrereturn etreturn await
La conversion automatique des valeurs en promesses avecPromise.resolve ne signifie pas quereturn await valeurPromesse sera équivalent àreturn valeurPromesse.
Si on reprend l'exemple précédent et qu'on le réécrit avecreturn await et qu'on intercepte une éventuelle erreur de la promesse :
async function getProcessedData(url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(url); } try { return await processDataInWorker(v); // et non plus simplement return } catch (e) { return null; }}Si on avait simplement écritreturn processDataInWorker(v);, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeurnull.
Lorsqu'on utilisereturn toto;, la valeurtoto sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis quereturn await toto; attendra la résolution detoto ou son échec et lèvera une exception si besoinavant de parvenir à renvoyer une valeur.
Spécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-async-function-definitions |