Await, Async

await est un opérateur qui permet de rendre synchrone une promesse. Il attend que la réponse soit retournée pour passer à l'instruction suivante. Cet opérateur ne peut être utilisé qu'à l'intérieur de fonction asynchrone.

De plus la valeur retournée devient la réponse de résolve.

exemple :

1
const delay = (duration) =>
2
    new Promise((resolve, reject) => {
3
      setTimeout(() => resolve(`${duration} seconde(s)`), duration * 1000);
4
    });
5
6
let a = delay(2) ; // a est une promesse
7
let b = await delay(2) ; // b est une String. b = "2 seconde(s)"
8
async permet de déclarer une fonction comme étant asynchrone. Le retour d'une fonction asynchrone est une promesse.
Méthodeasync
La création d'une fonction asynchrone se résume à l'ajout du terme async. La valeur de retour de votre fonction sera insérer comme response de la promesse retournée.
1
const fonctionAsync = async ()=>{return "retour de la promesse"};
2
console.log(fonctionAsync());
Dans notre cas, la fonction retourne : Promise {<fulfilled>: "retour de la promesse"}
Méthodeawait dans fonction async
Utiliser await dans une fonction async permet de lancer plusieurs promesses consécutives comme le ferait le chaînage de la la méthode then.
1
const delay = (duration) =>
2
  new Promise((resolve, reject) => {
3
    setTimeout(() => resolve(`${duration} seconde(s)`), duration * 1000);
4
  });
5
6
const fonctionAsync = async ()=>{
7
  console.log(await delay(5));
8
  console.log(await delay(2));
9
}  
10
fonctionAsync();  
11
12
console.log("Exemple de Promesse");
13
14
/*
15
delay(5).then((response) => console.log(response))
16
        .then((response) => delay(2))
17
        .then((response) => console.log(response));
18
*/
A l'intérieur de la fonction asynchrone les deux lignes sont effectuées séquentiellement. delay(5) est affichée avant delay(2) malgré qu'elle soit plus longue à répondre.
fonctionAsync est bien une fonction asynchrone, vous pouvez remarquer que Exemple de Promesse est bien interprété avant les autres log.
Méthodecatch
Comme il n'y a pas de méthode then il n'y a pas de catch. La gestion des erreurs se fait classiquement avec try et catch.
1
const delay = (duration) =>
2
  new Promise((resolve, reject) => {
3
    if(duration <= 5){
4
      setTimeout(() => resolve(`${duration} seconde(s)`), duration * 1000);
5
    } else {
6
      reject(`erreur ${duration} trop grand`);
7
    }
8
  });
9
10
const fonctionAsync = async ()=>{
11
  try {
12
    console.log(await delay(3));    
13
    console.log(await delay(7));
14
  } catch(e) {
15
    console.error(e)
16
  }    
17
}  
18
19
fonctionAsync();  
20
21
console.log("Exemple de Promesse");
22
La fonction affichera :
3 seconde(s)
erreur 7 trop grand
MéthodeIIFE (Immediately Invoked Function Expression)
Pour simplifier l'écriture, on peut utiliser une expression de fonction immédiatement invoquée.
Dans notre cas, la fonction n'étant utilisée qu'une seul fois, on s'épargne la création d'une variable inutile qui aurait pollué l'objet global.
1
const delay = (duration) =>
2
  new Promise((resolve, reject) => {
3
    if(duration <= 5){
4
      setTimeout(() => resolve(`${duration} seconde(s)`), duration * 1000);
5
    } else {
6
      reject(`erreur ${duration} trop grand`);
7
    }
8
  });
9
10
(async ()=>{
11
  try {
12
    console.log(await delay(3));    
13
    console.log(await delay(7));
14
  } catch(e) {
15
    console.error(e)
16
  }    
17
})()  
18
19
console.log("Exemple de Promesse");
20
La fonction affichera :
3 seconde(s)
erreur 7 trop grand