JavaScript: введение в Promises и почему Async/Await побеждает

Оригинальный адрес:JavaScript: Promises and Why Async/Await Wins the Battle

Асинхронные функции имеют хорошие и плохие стороны в JavaScript. Положительным моментом является то, что асинхронные функции не блокируют и поэтому работают быстро, особенно в контексте Node.js. Недостатком является то, что работа с асинхронными функциями может быть громоздкой, потому что иногда нужно дождаться завершения функции, чтобы получить «обратный вызов», прежде чем перейти к следующему выполнению.

Есть способы воспользоваться преимуществами асинхронных вызовов функций и правильно обработать их выполнение, но один намного лучше другого (Спойлер: это Async/Await). В этой статье вы узнаете, как использоватьPromisesа такжеAsync/AwaitВсе входы и выходы, и наши мысли о том, как они сравниваются.

Promises vs. Callbacks

Как разработчик JavaScript или Node.js, правильно поймитеPromisesа такжеCallbacksРазница между ними и тем, как они работают вместе, имеет решающее значение.

Между ними есть небольшие, но важные различия. в каждомPromiseЯдро, естьCallbackдля разрешения некоторых данных (или ошибок), которые вызываютсяPromise.

Обработчик обратного вызова:

Вызовите функцию validatePassword():

В следующем фрагменте кода показана полная сквозная проверка проверенного пароля (он статичен и должен совпадать с «bambi»):

Код очень хорошо прокомментирован, но если вы запутаетесь,catchТолько вreject()отpromiseВыполняется при вызове. Поскольку пароли не совпадают, вызываемreject(),следовательно“catch”ошибку и отправить наdone()функция.

Promises

По сравнению с традиционными методами, основанными на обратном вызове,PromiseПредоставляет более простую альтернативу для выполнения, создания и управления асинхронными операциями. Они также позволяют вам использовать синхронизацию, напримерtry / catchметод обработки асинхронных ошибок.

Промисы также предоставляют три уникальных состояния:

1. Pending- promiseрезультат не был определен, так как асинхронная операция, которая даст его результат, не завершена.
2. Fulfilled- асинхронная операция завершена, иpromiseиметь ценность.
3. Rejected- асинхронная операция не удалась,promiseникогда не материализуется. В отвергнутом состоянии,promiseесть одинreasonМожет указать, почему операция не удалась.

когдаpromiseсуществуетpendingсостоянии, его можно преобразовать вfulfilledилиrejectedположение дел. Однако однаждыpromiseполучатьfulfilledилиrejected, он никогда не перейдет в какое-либо другое состояние, егоvalueили причина отказа не изменится.

Недостаток 👎

PromiseЧего он не делает, так это не решает того, что называется «адом обратных вызовов» (Оригинал: обещания не решают того, что называется «адом обратных вызовов», который на самом деле представляет собой просто серию вложенных вызовов функций. Ад» на самом деле просто серия вложенных вызовов функций. Конечно, для одного звонка это не имеет значения. Но с несколькими вызовами ваш код будет трудно читать и поддерживать.

Зацикливание на обещаниях 🎡

Чтобы избежать глубоко вложенных обратных вызовов с помощью JavaScript, предположим, что можно просто пройтиPromises, возвращает результат объекту или массиву и останавливается по завершении. К сожалению, это непросто; из-за асинхронной природы JavaScript, если вы перебираете каждуюPromise, который не вызывается после завершения кода“done”мероприятие.

Правильный способ справиться с этой ситуацией - использоватьPromise.all(). Эта функция ожидает всехFulfillments(Или в первый разrejection).

Обработка ошибок 💣

Используйте несколько вложенныхPromiseПризывать к обработке ошибок — все равно, что водить машину с завязанными глазами. удачи в выяснении какойPromiseсделал ошибку. Лучше всего удалить его полностьюcatch()метод и подписаться на глобальный обработчик ошибок следующим образом:

браузер:

Node.js:

Уведомление: Вышеуказанные два варианта — это два способа гарантировать обнаружение ошибок. Если пропустили добавьтеcatch()метод, он будет проглочен кодом.

Асинхронно/Подождать?🤔

Async/AwaitПозволяет нам писать асинхронный JavaScript, который выглядит синхронно. Из первых нескольких частей этой статьи вы узналиPromises- Это должно упростить асинхронный поток и избежать ада обратных вызовов, но это не так.

Ад обратного звонка? 🔥

Callback-hellэто термин, используемый для описания следующих сценариев:

Примечание. Например, это вызов API для получения 4 конкретных пользователей из массива.

Такой код уродлив и занимает много места.Async/Await— это новейшая и лучшая вещь в JavaScript, которая позволяет нам не только избежать ада обратных вызовов, но и гарантировать, что наш код чист, а ошибки правильно обнаружены. я нашелAsync/AwaitСамое интересное, что он встроенPromisesвыше (неблокирующие и т. д.), и разрешить чтение кода, как если бы он был синхронным. В этом-то и дело.

Примечание. Вот пример набора вызовов API для извлечения 4 пользователей из массива, более половины строк кода:

Код элегантнее писать таким образом, верно? 💃

потому чтоAsync/Awaitпостроен на промисах, так что вы можете дажеawaitиспользоватьPromise.all():

Уведомление: Из-за характеристик синхронизацииAsync/awaitЧуть медленнее. Следует соблюдать осторожность при использовании его несколько раз подряд, потому чтоawaitКлючевое слово останавливает выполнение всего последующего кода, как и в синхронном коде.

Как начать работу с Async/Await? 💻

использоватьAsync/AwaitОчень легко понять и использовать. Фактически, он изначально доступен в последних версиях Node.js и быстро внедряется в браузеры. Теперь, если вы хотите использовать его на стороне клиента, вам нужно использовать Babel.

Асинхронный Асинхронный

Давайте начнем сasyncключевое слово начинается. его можно поместить вfunctionДо этого следующим образом:

Подожди Подожди

ключевые словаawaitзаставить JavaScript ждатьpromiseИдите вперед и верните его результат. Следующим образом:

полный пример

Почему Async/Await лучше? 😁

Теперь мы понялиPromisesа такжеAsync/AwaitМногое из того, что предлагается, давайте рассмотрим, почемуStreamдуматьAsync/Awaitявляется лучшим выбором для кодовых баз.

1. Async/AwaitПозволяет использовать меньше строк кода, менее печатать и меньше ошибок, обеспечивая чистую и краткую кодовую базу. В конечном итоге, он делает сложный вложенный код, который снова читаемый.
2. использоватьtry/catchОбработка ошибок (в одном месте, не при каждом вызове)
3. Стек ошибок имеет смысл, а не отPromisesПолучены неясные ошибки, они большие, и их трудно найти, где произошла ошибка. Самое главное, ошибка указывает на функцию, в которой произошла ошибка.

Заключительные мысли 📃

Можно сказатьAsync/Await— одна из самых мощных функций, добавленных в JavaScript за последние несколько лет.

Потребовалось меньше дня, чтобы понять синтаксис и увидеть, насколько плоха наша кодовая база в этом отношении. основывать всех нас наPromiseКод преобразуется вAsync/AwaitВ общей сложности это заняло около двух дней, и на самом деле это полная переработка — это просто для иллюстрации того, что при использовании Async/Await требуется меньше кода.