[Перевод] Как освоить Async/Await в реальных кейсах разработки

JavaScript
[Перевод] Как освоить Async/Await в реальных кейсах разработки

Оригинальный адрес:How To Master Async/Await With This Real World Example
Оригинальный автор:Adrian Hajdin
Переводчик:arzh
Рекомендуемая причина: асинхронные методы в ES6 стали неотъемлемой частью разработки, эта статья поможет вам быстро понять и извлечь уроки из реальной разработки.Async/Awaitиспользование

содержание

  1. Введение (обратные вызовы, промисы, асинхронность/ожидание)
  2. Реальный случай: конвертер валют получает асинхронные данные от двух API

перед вводом текста

Во время написания этого поста я также создал видео на YouTube!Вы можете смотреть и писать код по ходу дела. Я предлагаю вам сначала прочитать эту статью, а затем написать код вместе с видео.

Видео соединение:Learn Async/Await in This Real World Project

представлять

Async/Awaitэто новый способ написать асинхронный код. Он построен на обещаниях, поэтому он также не блокирует.

Самая большая разница в том,Async/AwaitИспользование делает асинхронный код немного похожим на синхронный код. Вот где вся его сила. Раньше асинхронный кодcallbacksа такжеpromiseДва варианта.

Использование функции обратного вызова

setTimeout(() => {
  console.log('This runs after 1000 milliseconds.');
}, 1000);

Проблема функции обратных вызовов - ад обратных вызовов

Вложение функций обратного вызова внутри функций обратного вызова быстро становится следующим:

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

Использование обещаний

const promiseFunction = new Promise((resolve, reject) => {
  const add = (a, b) => a + b;
  resolve(add(2, 2));
});
promiseFunction.then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
});

Функция promiseFunction возвращает обещание, представляющее ход выполнения функции. Функция разрешения сообщает экземпляру промиса о том, что он завершен.

Затем мы можем вызвать функции then() и catch() внутри функции обещания:

  1. then — обратный вызов, переданный запущенной функции обещания, когда она завершится
  2. catch — обратный вызов для передачи функции обещания в случае сбоя

Асинхронная функция

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

Асинхронные функции создаются путем добавления к объявлению функции префикса слова async.

const asyncFunction = async () => {
  // Code
}

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

Вот обещание иAsync/Awaitразница между

// Async / Await
const asyncGreeting = async () => 'Greetings';

// Promise
const promiseGreeting = () => new Promise(((resolve) => {
  resolve('Greetings');
}));
asyncGreeting().then(result => console.log(result));
promiseGreeting().then(result => console.log(result));

Async/AwaitПохоже на синхронный код, синхронный код легче понять.

Теперь, когда мы рассмотрели основы, давайте перейдем к нашему реальному примеру!

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

Описание и настройки проекта

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

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

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

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

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

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

Сначала введите команду:

const axios = require('axios')

Давайте углубимся в Async/Await

Цель этой программы состоит в том, чтобы иметь три асинхронные функции. Первая функция получит данные о валюте. Вторая функция — получение данных о стране. Третья функция собирает эту информацию в одном месте и красиво выводит ее пользователю.

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

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

const getExchangeRate = async (fromCurrency, toCurrency) => {}

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

const getExchangeRate = async (fromCurrency, toCurrency) => {
  const response = await axios.get('http://data.fixer.io/api/latest?access_key=[yourAccessKey]&format=1');
}

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

const rate = response.data.rates;

Поскольку все данные конвертируются из евро, мы создадим переменную с именем евро, которая будет равна (1 / валюта), которую мы хотим преобразовать.

const euro = 1 / rate[fromCurrency];

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

const exchangeRate = euro * rate[toCurrency];

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

Вторая функция -- получать данные о стране асинхронно

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

const getCountries = async (currencyCode) => {}

Как упоминалось ранее, мы получим данные и назначим их переменной

const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`);

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

return response.data.map(country => country.name);

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

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

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

const convert = async (fromCurrency, toCurrency, amount) => {}

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

const exchangeRate = await getExchangeRate(fromCurrency, toCurrency);

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

const countries = await getCountries(toCurrency);

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

const convertedAmount = (amount * exchangeRate).toFixed(2);

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

return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spend these in the following countries: ${countries}`;

Объединение всего вышеприведенного кода вместе должно выглядеть так

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

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

const getExchangeRate = async (fromCurrency, toCurrency) => {
  try {
    const response = await axios.get('http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');
    const rate = response.data.rates;
    const euro = 1 / rate[fromCurrency];
    const exchangeRate = euro * rate[toCurrency];
    return exchangeRate;
  } catch (error) {
    throw new Error(`Unable to get currency ${fromCurrency} and  ${toCurrency}`);
  }
};

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

const getCountries = async (currencyCode) => {
  try {
    const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`);
return response.data.map(country => country.name);
  } catch (error) {
    throw new Error(`Unable to get countries that use ${currencyCode}`);
  }
};

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

Наконец, мы можем вызывать функции и получать данные

convertCurrency('USD', 'HRK', 20)
  .then((message) => {
    console.log(message);
  }).catch((error) => {
    console.log(error.message);
  });

результат, который вы получите

Это все

Вы прошли весь путь до конца, если вы застряли в процессе, не стесняйтесь проверить этоскладкод выше.

Также проверьте это на YouTube, так как я только что создал канал!кликните сюда, впереди много интересного!

Категории