Javscript async / await

У цьому посібнику ви дізнаєтесь про ключові слова async / await JavaScript за допомогою прикладів.

Ви використовуєте asyncключове слово з функцією, щоб представити, що функція є асинхронною функцією. Функція async повертає обіцянку.

Синтаксис asyncфункції:

 async function name(parameter1, parameter2,… paramaterN) ( // statements )

Ось,

  • name - назва функції
  • параметри - параметри, які передаються функції

Приклад: функція асинхронізації

 // async function example async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f();

Вихідні дані

 Функція асинхронізації.

У наведеній вище програмі asyncключове слово використовується перед функцією, щоб показати, що функція є асинхронною.

Оскільки ця функція повертає обіцянку, ви можете скористатися методом ланцюжка then()таким чином:

 async function f() ( console.log('Async function.'); return Promise.resolve(1); ) f().then(function(result) ( console.log(result) ));

Вихідні дані

 Функція асинхронізації 1

У наведеній вище програмі f()функція вирішена, і then()метод виконується.

JavaScript чекає ключового слова

awaitВикористовується ключове слово всередині asyncфункції чекати асинхронної операції.

Синтаксис, який слід використовувати await:

 let result = await promise;

Використання awaitпризупиняє функцію асинхронізації, поки обіцянка не поверне значення результату (вирішити або відхилити). Наприклад,

 // 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();

Вихідні дані

 Обіцянку вирішено привіт

У наведеній вище програмі створюється Promiseоб’єкт, який вирішується через 4000 мілісекунд. Тут asyncFunc()функція записується за допомогою asyncфункції.

У awaitключовому слові очікує обіцянки бути повною (рішучість або відхилити).

 let result = await promise;

Отже, привіт відображається лише після того, як значення обіцянки стане доступним для змінної результату.

У наведеній вище програмі, якщо awaitвона не використовується, привіт відображається перед тим, як обіцянку вирішено.

Працює функція async / await

Примітка : Ви можете використовувати awaitлише всередині асинхронних функцій.

Функція асинхронізації дозволяє виконувати асинхронний метод, здавалося б, синхронним способом. Хоча операція є асинхронною, здається, що операція виконується синхронно.

Це може бути корисно, якщо в програмі є багато обіцянок. Наприклад,

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

У наведеній вище програмі awaitчекає завершення кожної обіцянки.

Обробка помилок

Під час використання asyncфункції ви пишете код синхронно. І ви також можете скористатися catch()методом для виявлення помилки. Наприклад,

 asyncFunc().catch( // catch error and do something )

Інший спосіб виправити помилку - за допомогою try/catchблоку. Наприклад,

 // 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

У наведеній вище програмі ми використовували try/catchблок для обробки помилок. Якщо програма успішно працює, вона перейде до tryблоку. І якщо програма видасть помилку, вона перейде до catchблоку.

Щоб дізнатись більше про try/catchподробиці, відвідайте JavaScript / try / catch JavaScript JavaScript.

Переваги використання асинхронної функції

  • Код є більш читабельним, ніж використання зворотного дзвінка або обіцянки.
  • Обробка помилок простіша.
  • Налагодження простіше.

Примітка : Ці два ключові слова async/awaitбули введені в новішій версії JavaScript (ES8). Деякі старіші браузери можуть не підтримувати використання async / await. Щоб дізнатись більше, відвідайте підтримку браузера JavaScript async / await.

Цікаві статті...