Comment utiliser \'async\' et \'await\' pour une programmation asynchrone fluide en JavaScript ?

Fonctions asynchrones en JavaScript avec « async » et « wait »

La programmation asynchrone est cruciale dans le modèle JavaScript. Lorsque les opérations asynchrones se terminent, l’exécution ultérieure de code supplémentaire est courante. Auparavant, les rappels étaient utilisés à cette fin. Cependant, les rappels imbriqués peuvent conduire à un « enfer des rappels ».

Promesses

Les promesses ont amélioré les problèmes associés aux rappels imbriqués. Ils permettent le chaînage via des « chaînes de promesses », qui fournissent une syntaxe et une gestion des erreurs plus claires. Par exemple :

<code class="javascript">const randomProm = new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve('Succes');
  } else {
    reject('Failure');
  }
});

// Promise chain
randomProm
  .then((value) => {
    console.log('inside then1');
    console.log(value);
    return value;
  })
  .then((value) => {
    console.log('inside then2');
    console.log(value);
    return value;
  })
  .catch((value) => {
    console.log('inside catch');
    console.log(value);
  });</code>

Mots clés « async » et « wait »

Les fonctions asynchrones, également connues sous le nom de « fonctions asynchrones », ont été introduites pour simplifier davantage la programmation asynchrone. . Ces fonctions sont préfixées par le mot-clé async et permettent l'utilisation du mot-clé wait.

await suspend l'exécution de la fonction asynchrone jusqu'à ce que l'expression qu'elle contient (généralement une promesse) se stabilise. La fonction reprend une fois l'expression résolue. Par exemple :

<code class="javascript">async function myAsyncFunc() {
  try {
    const result = await randomProm;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

myAsyncFunc();</code>

Dans cet exemple, myAsyncFunc est une fonction asynchrone qui attend le résultat de la randomProm Promise. Une fois la promesse résolue ou rejetée, la branche correspondante du bloc try/catch est exécutée. En utilisant async et wait, nous éliminons le besoin d'une logique de rappel complexe et améliorons la lisibilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!