MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Un objet AsyncFunction qui représente une fonction asynchrone qui exécute le code contenu dans la fonction.

Description

Lorsqu'une fonction asynchrone est appelée, elle renvoie une promesse. Lorsque la fonction asynchrone renvoie une valeur, la promesse est résolue avec la valeur renvoyée. Lorsque la fonction asynchrone lève une exception, la promesse est rompue avec la valeur de l'exception.

Une fonction asynchrone peut contenir une expression await qui permet d'interrompre l'exécution de la fonction asynchrone en attendant la résolution d'une promesse passée à l'expression. L'exécution de la fonction asynchrone reprend lorsque la promesse est résolue.

Note : L'objectif des fonctions asynchrones avec await est de simplifier le comportement des promesses lors d'opérations synchrones et d'opérer sur des groupes de promesses. Si les promesses sont en quelque sorte des callbacks organisés, async/await permet de combiner les générateurs et les promesses.

Exemples

Exemple simple

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

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

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

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

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

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.
Standard évolutif  
ECMAScript 2017 (ECMA-262)
La définition de 'async function' dans cette spécification.
Standard Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer  Edge Opera Safari (WebKit)
Support simple 55 52.0 (52.0) ? ? 42 10.1
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple (Oui) (Oui) 52.0 (52.0) (Oui) ? 42 10.1 55

Notes spécifiques à Firefox

Voir aussi

Étiquettes et contributeurs liés au document

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