В этом руководстве вы узнаете о ключевых словах JavaScript async / await с помощью примеров.
Вы используете 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;
Использование awaitas приостанавливает асинхронную функцию до тех пор, пока обещание не вернет значение результата (разрешить или отклонить). Например,
// 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только внутри асинхронных функций.
Функция 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
- Код более читабелен, чем использование обратного вызова или обещания.
- Обработка ошибок проще.
- Отладка проще.
Примечание . Эти два ключевых слова async/awaitбыли введены в новой версии JavaScript (ES8). Некоторые старые браузеры могут не поддерживать использование async / await. Чтобы узнать больше, посетите страницу поддержки JavaScript async / await в браузере.
