В този урок ще научите за ключовите думи 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;
Следователно, hello се показва само след като обещаната стойност е достъпна за променливата на резултата.
В горната програма, ако awaitне се използва, здравей се показва преди Promise разрешен.
Работа на функцията async / await
Забележка : Можете да използвате awaitсамо асинхронни функции.
Функцията async позволява асинхронния метод да бъде изпълнен по привидно синхронен начин. Въпреки че операцията е асинхронна, изглежда, че операцията се изпълнява по синхронен начин.
Това може да бъде полезно, ако в програмата има множество обещания. Например,
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 JavaScript / try / catch.
Предимства от използването на асинхронна функция
- Кодът е по-четлив от използването на обратно обаждане или обещание.
- Обработката на грешки е по-проста.
- Отстраняването на грешки е по-лесно.
Забележка : Тези две ключови думи async/awaitбяха въведени в по-новата версия на JavaScript (ES8). Някои по-стари браузъри може да не поддържат използването на async / await. За да научите повече, посетете поддръжката на браузъра async / await.
