Dans ce didacticiel, vous découvrirez les mots-clés JavaScript async / await à l'aide d'exemples.
Vous utilisez le asyncmot - clé avec une fonction pour représenter que la fonction est une fonction asynchrone. La fonction async renvoie une promesse.
La syntaxe de la asyncfonction est:
async function name(parameter1, parameter2,… paramaterN) ( // statements )
Ici,
- nom - nom de la fonction
- paramètres - paramètres qui sont passés à la fonction
Exemple: fonction Async
// async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();
Production
Fonction asynchrone.
Dans le programme ci-dessus, le asyncmot-clé est utilisé avant la fonction pour représenter que la fonction est asynchrone.
Puisque cette fonction retourne une promesse, vous pouvez utiliser la méthode de chaînage then()comme ceci:
async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));
Production
Fonction async 1
Dans le programme ci-dessus, la f()fonction est résolue et la then()méthode est exécutée.
JavaScript en attente de mot-clé
Le awaitmot-clé est utilisé à l'intérieur de la asyncfonction pour attendre l'opération asynchrone.
La syntaxe à utiliser en attente est:
let result = await promise;
L'utilisation de awaitmet la fonction async en pause jusqu'à ce que la promesse renvoie une valeur de résultat (résolution ou rejet). Par exemple,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( // wait until the promise resolves let result = await promise; console.log(result); console.log('hello'); ) // calling the async function asyncFunc();
Production
Promesse résolue bonjour
Dans le programme ci-dessus, un Promiseobjet est créé et il est résolu après 4000 millisecondes. Ici, la asyncFunc()fonction est écrite à l'aide de la asyncfonction.
Le awaitmot-clé attend que la promesse soit complète (résolution ou rejet).
let result = await promise;
Par conséquent, bonjour n'est affiché qu'une fois que la valeur de promesse est disponible pour la variable de résultat.
Dans le programme ci-dessus, s'il awaitn'est pas utilisé, bonjour s'affiche avant la résolution de la promesse.
Fonctionnement de la fonction async / await
Remarque : vous ne pouvez utiliser awaitque les fonctions asynchrones.
La fonction asynchrone permet à la méthode asynchrone d'être exécutée de manière apparemment synchrone. Bien que l'opération soit asynchrone, il semble que l'opération soit exécutée de manière synchrone.
Cela peut être utile s'il y a plusieurs promesses dans le programme. Par exemple,
let promise1; let promise2; let promise3; async function asyncFunc() ( let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result1); console.log(result1); )
Dans le programme ci-dessus, awaitattend que chaque promesse soit complète.
La gestion des erreurs
Lors de l'utilisation de la asyncfonction, vous écrivez le code de manière synchrone. Et vous pouvez également utiliser la catch()méthode pour détecter l'erreur. Par exemple,
asyncFunc().catch( // catch error and do something )
L'autre façon de gérer une erreur consiste à utiliser try/catchblock. Par exemple,
// a promise let promise = new Promise(function (resolve, reject) ( setTimeout(function () ( resolve('Promise resolved')), 4000); )); // async function async function asyncFunc() ( try ( // wait until the promise resolves let result = await promise; console.log(result); ) catch(error) ( console.log(error); ) ) // calling the async function asyncFunc(); // Promise resolved
Dans le programme ci-dessus, nous avons utilisé try/catchblock pour gérer les erreurs. Si le programme s'exécute avec succès, il ira au trybloc. Et si le programme renvoie une erreur, il ira au catchbloc.
Pour en savoir plus try/catchen détail, visitez JavaScript JavaScript try / catch.
Avantages de l'utilisation de la fonction asynchrone
- Le code est plus lisible que l'utilisation d'un rappel ou d'une promesse.
- La gestion des erreurs est plus simple.
- Le débogage est plus facile.
Remarque : ces deux mots async/await- clés ont été introduits dans la nouvelle version de JavaScript (ES8). Certains navigateurs plus anciens peuvent ne pas prendre en charge l'utilisation de async / await. Pour en savoir plus, visitez JavaScript async / wait browser support.
