Как освоить Async / Await в JavaScript на реальных примерах

Как освоить Async / Await в JavaScript на реальных примерах

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

Наряду с написанием этой статьи я также создал видео на YouTube! Вы можете смотреть его и кодировать во время просмотра. Советую сначала прочитать статью, а затем написать код, руководствуясь видео.Ссылка на видео: Изучаем Async / Await на реальном проекте.

Предыдущими вариантами асинхронного кода были обратные вызовы и promises.

Обратные вызовы в действии

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

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

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

Проблема с обратными вызовами  -  печально известный ад обратных вызовов

Вложенные обратные вызовы внутри обратных вызовов скоро начнут выглядеть так:

Ад обратных вызовов

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

Promises в действии

promiseFunction возвращает Promise, который представляет процесс этой функции. Функция разрешения сообщает об окончании экземпляра Promise. После этого мы можем вызвать для этой функции .then() и .catch():

then — запускает обратный вызов, который вы передали ему для случая, когда Promise выполнен.

catch  - запускает обратный вызов, который вы передали ему для случая, когда что-то пошло не так.

Асинхронные функции

Асинхронная функция предоставляет нам чистый и лаконичный синтаксис, позволяющий писать меньше кода для достижения того же результата, который мы получили бы с помощью Promise. Async — не более чем синтаксический сахар для Promise. Асинхронные функции создаются путем добавления слова async перед объявлением функции следующим образом:

Асинхронные функции могут быть приостановлены с помощью await, ключевого слова, которое может быть использовано только внутри асинхронной функции. Await возвращает все, что возвращает асинхронная функция, когда она завершена. В этом разница между promises и async/await:

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

Конвертер валют

Разъяснение и настройка проекта

В этом руководстве мы создадим простое, но полезное приложение, которое улучшит ваши общие знания об Async / Await.

Программа будет принимать код валюты, из которой мы хотим конвертировать, и код валюты, в которую мы хотим конвертировать, а также сумму. После этого программа выведет корректный обменный курс на основе данных из API.

В этом приложении мы собираемся получать данные из двух асинхронных источников:

Currency Layer - вам нужно бесплатно зарегистрироваться, чтобы использовать ключ доступа API. Этот API предоставит нам данные, необходимые для расчета обменного курса между валютами.

Rest Countries - этот API предоставит нам информацию о том, где мы можем использовать валюту, в которую только что перевели деньги.

Для начала создайте новый каталог и запустите npm init, пропустите все шаги и установите axios, введя npm i —save axios. Создайте новый файл с именем currency-converter.js.

Во-первых, установите зависимость axios, введя: const axios = require(‘axios’);

Давайте рассмотрим подробнее async/await

Наша цель состоит в том, чтобы получить три функции. Ни одну, ни две, а три асинхронные функции. Первая функция будет собирать данные о валютах. Вторая — данные о странах. И третья функция будет собирать эту информацию в одном месте и красиво отображать ее пользователю.

Первая функция — асинхронное получение данных валюты

Мы создадим асинхронную функцию, которая будет принимать два аргумента: fromCurrency и toCurrency.

Теперь нам нужно получить данные. С помощью async / await мы можем назначать данные непосредственно переменной; не забудьте зарегистрироваться и ввести свой корректный ключ доступа.

Данные из ответа доступны в разделе response.data.rates, так что мы можем поместить их в переменную чуть ниже ответа:

Поскольку все конвертируется из евро, ниже мы создадим переменную с именем euro, которая будет равна 1 / на валюту, из которой мы хотим конвертировать:

Наконец, чтобы получить обменный курс, мы можем умножить евро на валюту, в которую мы хотим конвертировать:

Функция должна выглядеть примерно так:

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

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

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

Вторая функция — асинхронный прием данных страны

Мы создадим асинхронную функцию, которая будет принимать в качестве аргумента currencyCode:

Мы собираемся извлечь данные и присвоить их переменной:

Затем мы сопоставим данные и вернемся к каждому country.name:

В конце функция должна выглядеть примерно так:

Третья и последняя функция — объединение всего вместе

Мы создадим асинхронную функцию, которая будет принимать в качестве аргументов fromCurrency, toCurrency и сумму:

Сначала мы получаем данные валюты:

Во-вторых, мы получаем данные страны:

В-третьих, мы сохраняем конвертированную сумму в переменную:

Наконец, мы выводим все это пользователю:

Все это вместе должно выглядеть так:

Добавление try / catch для устранения ошибок

Нам нужно обернуть всю нашу логику в try и перехватить ошибку, если она есть:

Повторите то же самое для второй функции:

А поскольку третья функция просто работает с тем, что предусмотрено первой и второй функциями, в ней нет необходимости проверять ошибки. Наконец, мы можем вызвать функцию и получить данные:

Результат:

Вот и все!

Мы закончили! Если вы что-то не уловили, код доступен в этом хранилище.

Автор: Adrian Hajdin

Источник: https://medium.freecodecamp.org/

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

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

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

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

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

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

Смотреть

Метки:

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

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

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

Добавить комментарий