Async-await - это новая функция, добавленная в javascript. В async-await async - это асинхронные функции, а await - это оператор.
Зачем вам это нужно?
Async-await решает следующие проблемы.
1. Ад обратного вызова и цепочка обещаний.
2. Повышение читабельности асинхронного кода.
3. Его можно использовать, чтобы убедиться, что каждый бит данных доступен перед выполнением некоторых магических инструкций.
Что это такое?
Давайте сначала поговорим об асинхронности. Используя async, вы можете писать асинхронный код, как если бы он был синхронным. Это делает ваш асинхронный код, основанный на обещаниях, выглядит и ведет себя как синхронный, более читаемый, не блокируя основной поток выполнения javascript. Async всегда возвращает Promise, если вы используете await of not. Это обещание разрешается с тем, что возвращает функция async, или отклоняет с тем, что бросает функция async.
Теперь поговорим об ожидании. Await можно использовать только внутри асинхронных функций. Он используется для ожидания обещания. Выражение Await содержит значение, выполняемое Promise.
Как это написать?
Ниже приведен фрагмент кода, в котором показано, как использовать async и ключевое слово await.
function resolveAfter2Seconds() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘resolved’);
}, 2000);
});
}
//function can be decalred as async
async function asyncCall() {
console.log(‘calling’);
/** wait for promise */
const result = await resolveAfter2Seconds();
/** After fulfilled promise execution of function start again from here */
console.log(result);
setTimeout(() => {console.log(“after await”);},1000);
}
asyncCall();
console.log(“test”);
asyncCall();
output:
calling // First asyncCall, function execution stop for await
test // It is not blocking the main thread
calling // Second asyncCall, function execution stop for await
resolved // Print fulfilled promise result of asyncCall
resolved // Print fulfilled promise result of asyncCall
after await // Timeout executes of the first asyncCall
after await // Timeout executes of the second asyncCall
Как видите, код выглядит и выполняется синхронно. Выполнение функции начинается снова там, где код был оставлен на ожидание. Выполнение кода асинхронное и неблокирующее. Async / await разработан с использованием функциональности обещания и генератора javascript.
Где это использовать?
Предположим, вы пишете код для отображения индексной страницы книги. Для отображения индексной страницы у вас есть следующий API.
1. Получить уникальный идентификатор глав (getAllChaptersId).
2. Получить информацию о главах (getChapterDetail).
Вы можете реализовать функциональность, используя обещание, как показано ниже:
function loadIndexPage(){
fetch("/getAllChaptersId").then((response) => {
return Promise.all(
response.chapters.map((chapterId) => fetch(`/getChapterDetail? id=${chapterId}`));
).then((chapters) => {
chapters.forEach(addTitleToIndex);
}).catch((error) => {
showError("Unable to load");
});
}
Вы можете реализовать ту же функциональность, используя async / await, как показано ниже:
async function loadIndexPage(){
const chaptersId = await fetch("/getAllChaptersId");
const chapters = chaptersId.map( chapterId => {
const response = await fetch(`/getChapterDetail?id=${chapterId}`);
return response;
});
chapters.forEach(addTitleToIndex);
}
Как видите, он более читабельный и понятный. Это позволяет избежать ада обратных вызовов и серии функций then.
Вы можете обрабатывать ошибки следующими способами.
- попробуйте… поймать блок
- Добавьте блок catch в обещание.
Что нужно помнить
- Не пишите код слишком последовательно.
- Проверьте поддержку браузера и добавьте полифилл.
Полезные ресурсы
