JavaScript Async + Await за 5 минут

JavaScript Async + Await за 5 минут

От автора: скорее всего, вы сталкивались с промисами в своем JavaScript. Они позволяют подключиться к завершению асинхронных вызовов. Они упрощают цепочку асинхронных операций или даже группируют их вместе. Есть один крошечный недостаток. При использовании промисов синтаксис не всегда самый красивый. Представляем async + await.

Для тех, кто в лагере TL; DR, async + await являются синтаксическим сахаром для применения промисов. Они помогают понять поток кода. Они не вводят никаких новых понятий.

Выпечка пирога из кода

Мы собираемся испечь пирог! Чтобы испечь пирог, нам сначала нужно получить ингредиенты. Извините, это простой рецепт: масло, мука, сахар, яйца.

В нашем коде получение каждого ингредиента требует асинхронной операции. Например, вот метод getButter:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Эти операции станут частью метода getIngredients. Когда мы печем торт, нам нужно вызвать getIngredients перед тем, как смешать его и т. д.

С помощью промисов

Давайте предположим, что нам нужно связать каждую асинхронную операцию. getIngredients — это прогулка по супермаркету, когда мы собираем ингредиенты один за другим.

В большинстве случаев нам нужно объединять операции только в том случае, если они зависят друг от друга. Например, если вторая операция требует возврата значения из первой и так далее.

В нашем примере, возможно, мы можем добавлять в корзину только один товар за один раз. Это означает, что нам нужно продвигаться по ингредиентам один за другим. Помните, что код здесь является гипотетическим и предназначен для демонстрации promise.

Как может getIngredients выглядеть с промисами? Я, конечно, видел подобные вложенные промисы раньше.

Это работает, но выглядит не очень хорошо. Это выглядело бы лучше с цепочкой промисов.

Если бы мы делали покупки в Интернете, мы могли бы использовать Promise.all.

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

Использование async + await

Давайте добавим синтаксический сахар и используем ключевое слово await, мы должны сначала объявить метод как асинхронный с помощью ключевого слова async. Важно отметить, что асинхронный метод всегда возвращает Promise. Это означает, что нет необходимости явно возвращать Promise.

Давайте объявим getIngredients, как async:

Теперь, как эти промисы могут выглядеть с сахаром? Ключевое слово await позволяет ожидать промис и определять переменную с помощью возвращаемого значения этого промиса. Это немного многословно, но давайте применим этот сахар к getIngredients.

Код не стал меньше, но он более лаконичен. Больше никаких обратных вызовов. Здесь в игру вступает синтаксический сахар.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Вот это да! Намного чище?

Использование async и await делает наш код всеобъемлющим. Он выглядит чище, а делает то же самое. Здесь важно помнить, что мы не заменяем промисы, мы все еще используем их под капотом. Теперь мы используем их с новым более чистым синтаксисом.

И да, Promise.all тоже работает. Так что, если бы мы делали покупки онлайн, наш код стал бы еще меньше.

Нам больше не нужна эта функция-оболочка!

Ожидание не промиса

Как насчет того, если значение, которое вы ожидаете не является Promise? В нашем примере асинхронные функции возвращают String после setTimeout.

Ошибки не будет, значение становится разрешенным промисом.

Как насчет отклонений?

До сих пор мы имели дело с успешным выполнением. Но как насчет случая, когда Promise отклоняется? Например, что, если на складе нет яиц? Наша функция async для getEggs будет отклонена с потенциальной ошибкой. В этом случае простой оператор try/ catch выполнит всю работу:

Мы могли бы обернуть в него код на этом уровне или выше, где мы вызываем getIngredients.

Применение нашей функции и выпечка пирога

Если вы дошли до сих пор, то мы создали функцию getIngredients с новыми ключевыми словами async+ await. Как может выглядеть все остальное?

Намного чище, чем то, что мы могли бы сделать ранее с помощью Promises.

Это все! Выпечка пирога с помощью async+ await завершена

Если вы дошли до этого места, спасибо за чтение. Я подытожил суть с некоторыми возможными примерами кода, которые можно увидеть ниже вместе с некоторыми дополнительными ресурсами по async+ await. Важные моменты:

Функции async всегда возвращает Promise

await в большинстве случаев лучше использовать вместо Promise или группы Promise

Обрабатывайте любые потенциальные ошибки с помощью оператора try/catch

vМы не касались этого, но вы можете заняться. Создавая запрос fetch, вы можете ожидать запрос, а затем ожидать функцию json.

Как всегда, любые вопросы или предложения, пожалуйста, оставляйте в комментариях.

Автор: Jhey Tompkins

Источник: //dev.to

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: