Если вы столкнулись с кодом, как ниже, то эта статья поможет вам несколькими способами 😁.
fetchPizzas()
.then((pizzas) => {
return sortByToppings(pizzas)
.then((pizzas) => {
return checkDeliveryOptions(pizzas)
.then((pizzasWithDelivery) => {
return checkBirthdayGift(pizzasWithDelivery)
.then((pizza) => {
return sendToCustomer(pizza);
});
});
});
});
Немного фона
Есть много раз, когда у нас есть куча задач, которые должны выполняться последовательно. Примеры из обработки файлов до вызова баз данных несколько раз в зависимости от результата предыдущего вызова. Или вызов нескольких API в последовательности, где один вызов зависит от другого.
До введения Асинхрон/жду , многие использовали обратные вызовы вместе с settimeout Чтобы смоделировать поведение, которое они хотели (он же обратный вызов). Позже люди начали использовать обещания, которые сделали код гораздо более читаемым, но они окажутся в том же месте, когда количество звонков, где высокое (он же обещание ад).
Асинхронные функции
Функция в JavaScript – Асинхронизация Когда он работает асинхронно через цикл событий, используя неявное обещание вернуть свой результат. Кроме того, тип его результата должен быть Асинкфункция объект.
Эта функция – не что иное, как комбинация обещания и генераторы Анкет Я не буду вдаваться в подробности генераторов, но они обычно содержит один или много урожай ключевые слова.
Теперь давайте посмотрим Асинхронизация функция в действии. Предположим, что у нас есть функция, которая возвращает строку:
function hi() {
return 'Hi from JavaScript';
}
hi(); // 'Hi from JavaScript'
Если мы положим Асинхронизация Перед функцией, тогда он больше не возвращает строку, это будет обещание, которое автоматически обернуто вокруг строкового значения.
async function hi() {
return 'Hi from JavaScript';
}
hi(); // Promise {: "Hi from JavaScript"}
Теперь, чтобы получить ценность от обещания, которое мы действуем раньше:
hi().then(console.log); // 'Hi from JavaScript'
Вам может быть интересно, как это может помочь решить проблему обещания. Просто обнажены со мной, и мы доберемся по шагам с примерами, чтобы было бы ясно, когда мы закончим.
Ждите
ждет Заставляет JavaScript Engine ждать, пока обещание не будет решено/отклонено, и вернет его результат. Это ключевое слово можно использовать только внутри Асинхронизация функция
const doSomething = async () => {
console.log(await hi())
};
// 'Hi from JavaScript'
Вы можете подумать с ждет Заставляет двигатель JavaScript ждать, он будет иметь некоторую стоимость на процессоре. Но это не тот случай, потому что двигатель может выполнять другие сценарии, ожидая обещания получить разрешение/отклонение. Плюс это гораздо более элегантно, что использование Обещания и .потом .
Предупреждение: Если вы попытаетесь вызвать Асинхронизация функция с использованием ждет Внутри нормальной функции вы получите синтаксисную ошибку.
function doSomething() {
await hi(); // Uncaught SyntaxError: await is only valid in async function
}
Небольшой улов
Большинство людей, которые начинают работать с Асинхрон/жду Забудь, что они не могут вызвать Асинхронизация Функция на коде верхнего уровня. Это связано с тем, что мы не можем иметь ждет Внутри нормальной функции и функции верхнего уровня по умолчанию нормальны.
let response = await hi(); // syntax error in top-level code console.log(response);
Однако вы можете сделать ваш код в асинхро Iife (немедленно вызвано выполнение функции) и вызовите его прямо там:
(async () => {
let response = await hi();
console.log(response); // 'Hi from JavaScript'
...
})();
Обновление : Как Ник Тайлер В комментариях упоминается, что предложение 3 -го этапа поддержать ждет в коде высшего уровня. Так что следите за обновлениями и смотрите это пространство:
TC39/Предложение-Top-Level-Await
Предложение на верхнем уровне для Ecmascript (этап 3)
Чемпион: Майлз Боринс
Статус: этап 3
Синопсис
Верхний уровень ждет позволяет модулям действовать как большие асинхронные функции: с верхним уровнем ждет , Модули Ecmascript (ESM) могут ждет Ресурсы, вызывая другие модули, которые импорт им подождать, прежде чем они начнут оценивать свое тело.
Мотивация
Ограничения на iiafes
С ждет доступно только в Асинхронизация Функции, модуль может включать ждет В коде, который выполняется при запуске, учитывая этот код в Асинхронизация Функция:
// awaiting.mjs
import { process } from "./some-module.mjs";
let output;
async function main() {
const dynamic = await import(computedModuleSpecifier);
const data = await fetch(url);
output = process(dynamic.default, data);
}
main();
export { output };Этот шаблон также может быть немедленно вызван. Вы можете назвать это сразу же вызванной асинхронной функцией…
Обработка ошибок
Как я уже говорил, большинство Асинхронизация Функции могут быть записаны как нормальная функция с обещаниями. Однако Асинхронизация функции меньше Ошибка склонна Когда дело доходит до обработки ошибок. Если ожидаемый вызов не удается, исключение автоматически поймано, а Ошибка Объект будет распространяться на вызывающего абонента, используя неявное обещание возврата.
До этого нам пришлось отклонить обещание, которое было возвращено из нормальной функции, и использовать .catch в звонящем. Я видел много мест, где разработчики использовали Try/Catch и бросили новое исключение, что означало, что трассировка стека будет сброшена.
async function hi() {
throw new Error("Whoops!");
};
async function doSomething() {
try {
let response = await hi();
return response;
} catch(err) {
console.log(err);
}
}
doSomething();
Или вы можете избежать попробуй/поймать Потому что обещание, сгенерированное вызовом Привет становится отвергнутым. Тогда просто используйте .catch Чтобы обработать ошибку.
async function hi() {
throw new Error("Whoops!");
};
async function doSomething() {
let response = await hi();
return response;
}
doSomething().catch(err => {
console.log(err);
});
Вы можете игнорировать все вместе и обрабатывать все исключения, используя Глобальный обработчик исключений Если вы думаете, что это больше подходит для вашей ситуации. Что -то вроде этого, которое использует onrectionHandled свойство WindowsEventhandlers микшин.
window.onrejectionhandled = function(e) {
console.log(e.reason);
}
Обещание. Все совместимость
Вы можете использовать Асинхрон/жду вместе с Обещание. Все Чтобы дождаться нескольких обещаний:
const responses = await Promise.all([
fetch('yashints.dev/rss'),
hi(),
...
])
Если возникает ошибка, она распространяется как обычно, от неудачного обещания до Обещание. Все а затем превращается в исключение, которое вы можете поймать, используя любой из вышеперечисленных методов.
await может принять “тогда” тогда “
Похоже на обещание , если у вас есть какой -либо объект, который имеет .then Метод, ждет Примет это. Это для поддержки сценариев, в которых объект из третьей стороны, который не является обещанием, но совместимым с обещанием (он поддерживает .then ), этого было бы достаточно, чтобы использовать его с ждет Анкет
class Greeting {
constructor(name) {
this.name = name;
}
then(resolve, reject) {
console.log(resolve);
setTimeout(() => resolve(`Hi ${this.name}`));
}
};
async function greet() {
const greeting = await Greeting('Yaser');
console.log(greeting); // Hi Yaser
};
greet();
Асинхронные методы
Вы можете иметь Асинхронизация класс метод. Просто приготовьте его с Асинхронизация И ты в порядке.
class Order {
async deliver() {
return await Promise.resolve('Pizza');
}
}
new Order()
.deliver()
.then(console.log); // Pizza
Резюме
Просто чтобы быстро пройти через то, что мы обсуждали до сих пор:
АсинхронизацияКлючевое слово делает метод асинхронным, который, в свою очередь, всегда возвращает обещание и допускаетждетиспользоваться.ждетКлючевое слово перед обещанием заставляет JavaScript ожидание, пока это не будет решено/отклонено. Если обещание отклоняется, генерируется исключение, в противном случае результат возвращается.- Вместе они предоставляют нам прекрасную возможность написать чистый, более проверенный, асинхронный код.
- С
асинхрон/ждуВам не понадобится.then/.catch, но просто обратите внимание, что они все еще основаны на обещаниях. - Вы можете использовать
Обещание. ВсеЧтобы дождаться несколькихАсинхронизацияфункционирует вызовы. - Вы можете иметь
АсинхронизацияМетод в классе.
Я знаю, что вокруг есть много замечательных статей асинхрон/жду , Но я пытался осветить некоторые предметы, где мне приходилось постоянно напоминать себе. Надеюсь, это поможет вам иметь централизованное место для большей части того, что вам нужно, чтобы написать чистый асинхронный JavaScript.
Удачи, изучая эти очки.
Оригинал: “https://dev.to/yashints/6-points-you-need-to-know-about-async-await-in-javascript-1d1o”