We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

La déclaration async function définit une fonction asynchrone qui renvoie un objet AsyncFunction.

On peut également définir des fonctions asynchrones grâce au constructeur AsyncFunction et via une expression de fonction asynchrone.

Syntaxe

async function name([param[, param[, ... param]]]) {
   instructions
}

Paramètres

name
Le nom de la fonction.
param
Le nom d'un argument à passer à la fonction.
instructions
Les 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 fonction async peut contenir une expression await qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée Promise. 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 exception SyntaxError.

Note : Le but des fonctions async/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 à des callbacks structurés, async/await est semblable à la combinaison des générateurs et des promesses.

Exemples

Exemple simple

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function add1(x) {
  const a = await resolveAfter2Seconds(20); 
  const b = await resolveAfter2Seconds(30); 
  return x + a + b;
}

add1(10).then(v => {
  console.log(v);  // affiche 60 après 4 secondes.
});

async function add2(x) {
  const a = resolveAfter2Seconds(20); 
  const b = resolveAfter2Seconds(30); 
  return x + await a + await b;
}

add2(10).then(v => {
  console.log(v);  // affiche 60 après 2 secondes.
});

Attention ! Il ne faut pas confondre await et Promise.all().

Avec la fonction add1(), on suspend l'exécution pendant 2 secondes avant le premier await puis encore 2 autres secondes avant le second await. Le deuxième minuteur n'est pas créé tant que le premier n'a pas été déclenché.

Avec add2(), les deux minuteurs sont créés et patientent avec await. Le temps de résolution est donc de 2 secondes plutôt que 4 car les minuteurs s'exécutent de façon concurrente.

Toutefois, dans les deux fonctions les appels à await sont exécutés en série et pas en parallèle. Cela ne correspond pas au fonctionnement de Promise.all(). Si vous souhaitez « patienter » pendant l'exécution de plusieurs promesses en parallèle, mieux vaudra utiliser Promise.all().

Réécrire une chaîne de promesses avec des fonctions asynchrones

Lorsqu'on utilise des API qui renvoient des promesses (cf. Promise), on finit par créer des « chaînes » de promesses et on divise alors une fonction en de nombreux fragments. Prenons l'exemple suivant :

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
    });
}

On peut réécrire ce fragment de code en une seule fonction asynchrone :

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url); 
  } catch (e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}

Dans l'exemple précédent, on n'inclue pas d'instruction await dans l'instruction return car la valeur de retour d'une fonction asynchrone est implicitement passée dans la méthode Promise.resolve.

Spécifications

Spécification État Commentaires
ECMAScript Latest Draft (ECMA-262)
La définition de 'async function' dans cette spécification.
Projet  
ECMAScript 2017 (ECMA-262)
La définition de 'async function' dans cette spécification.
Standard Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple55 Oui52 Non4210.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui55 Oui524210.16.0

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, Osilos, JulienPradet, vTripes
Dernière mise à jour par : SphinxKnight,