В этой статье мы создадим простое приложение конвертера валют и увидим, как работает async/await. Мы также узнаем о синхронном и асинхронном программировании.
Необходимые условия обучения
- Быть знакомым с JavaScript ES6
- Базовые знания nodejs
- Синхронный запрос
- Синхронный в основном означает, что вы можете выполнять только одну вещь за раз.
- нужно дождаться завершения одной задачи, прежде чем переходить к следующей.
- выполнять одно задание за раз
2. Асинхронный запрос
- Асинхронная модель позволяет выполнять несколько действий одновременно,
вам не нужно заканчивать выполнение текущего действия, чтобы перейти к следующему. Код выполняется в фоновом режиме - в модели асинхронного программирования все происходит по одному
- когда вы вызываете функцию, которая выполняет длительное действие, она возвращается только после завершения действия, чтобы она могла вернуть результат
- это останавливает вашу программу на время выполнения действий
Теперь давайте начнем с создания простого приложения. мы будем использовать два API как:
a.http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1 вы можете перейти на .http://data.fixer.io и создать учетную запись, чтобы получить ключ доступа
b. https://restcountries.eu/rest/v2/currency/${toCurrency} этот API предоставляет список стран, в которых конвертируется валюта.
ПРИМЕЧАНИЕ. В вашей системе должен быть установлен nodejs.
Настройка проекта
Создайте папку «currency-converter» и найдите в ней. Затем откройте папку с помощью вашей IDE, я использую vscode.
$ npm init $ yarn add axios //OR using npm $ npm i axios
Мы устанавливаем axios для нашего вызова API. Теперь давайте создадим файл index.js внутри нашей корневой папки. Вы можете создать файл index.js напрямую или с помощью node из своего терминала как:
$ touch index.js
Наша структура папок будет выглядеть так:
Мы создадим 3 функции в index.js
1-я функция: getExchangeRate
2-я функция: getCountries
3-я функция: convertCurrency
В нашем файле index.js давайте создадим функцию одну за другой.
const axios = require(‘axios’)
//1st function
const getExchangeRate = () => {
const response = axios.get(‘http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');
console.log(response)
}
getExchangeRate();//function calling
Мы создали функцию getExchnageRate без использования async/await. теперь вы можете видеть, что мы вызываем API, используя axios для получения данных и console.log(response) для просмотра вывода. вы можете запустить index.js, набрав node index.js в своем терминале, чтобы увидеть результат. Вы увидите «Ожидающее обещание» и некоторое предупреждение, как показано ниже.
Теперь давайте используем async/await в приведенной выше функции и посмотрим на выходной ответ.
//in index.js
const axios = require(‘axios’)
//1st function
const getExchangeRate = async () => {
const response = await axios.get(‘http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');
console.log(response)
}
getExchangeRate();
Когда мы используем async/await, мы получаем фактические данные в качестве вывода вместо ожидающих обещаний. Функция не присваивает фактические данные переменной ответа до тех пор, пока все данные не будут получены, если мы не используем ожидание, тогда переменная ответа станет неопределенной.
ПРИМЕЧАНИЕ: с помощью асинхронной функции мы можем назначить все асинхронные извлеченные ответы переменной, нам не нужно использовать обратные вызовы, такие как then(), catch()
Теперь давайте напишем код, который действительно конвертирует сумму из заданных «fromCurreny» и «toCurrency». Наш index.js меняется на
//in index.js
const axios = require(‘axios’)
//1st function
const getExchangeRate = async (fromCurrency, toCurrency) => {
const response = await axios.get(‘http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');
const rates = response.data.rates;
const Npr = 1 / rates[fromCurrency]
const exchangeRate = Npr * rates[toCurrency];
if (isNaN(exchangeRate)) {
throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency} `)
}
console.log(exchangeRate)
}
getExchangeRate(‘USD’,’NPR’) //this gives exchange rate from USD doller to Neplease rupee
Type $ node index.js to see the output in your terminal
Теперь давайте создадим вторую функцию, которая даст список названий стран, в которых доступны обменные курсы.
//2nd function
const getCountries = async (toCurrency) => {
try {
const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${toCurrency}`);
const countryNames = response.data.map(country => { return country.name });
return countryNames;
} catch (error) {
throw new Error(`Unable to get countries that use ${toCurrency}`)
}
}
В приведенной выше функции мы получаем список стран, в которых доступен обмен «toCurrency». Мы фильтруем название страны только из ответа, используя функцию Array Map.
И наша последняя функция
//3rd function
const convertCurrency = 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 spent it in following countries ${countries}`;//1 USD is worth 119 NPR
}
Последняя функция «convertCurreny» выдает конвертированную сумму любых двух заданных валют, то есть «fromCurrency» и «toCurrency».
Наш окончательный файл index.js выглядит следующим образом:
//in index.js
const axios = require(‘axios’)
//1st function
const getExchangeRate = async (fromCurrency, toCurrency) => {
const response = await axios.get(‘http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');
const rates = response.data.rates;
const Npr = 1 / rates[fromCurrency]
const exchangeRate = Npr * rates[toCurrency];
if (isNaN(exchangeRate)) {
throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency} `)
}
console.log(exchangeRate)
return exchangeRate;
}
//2nd function
const getCountries = async (toCurrency) => {
try {
const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${toCurrency}`);
const countryNames = response.data.map(country => { return country.name });
return countryNames;
} catch (error) {
throw new Error(`Unable to get countries that use ${toCurrency}`)
}
}
const convertCurrency = async (fromCurrency, toCurrency, amount) => {
const exchangeRate = await getExchangeRate(fromCurrency, toCurrency);//this will wait until it get the final result
const countries = await getCountries(toCurrency);
const convertedAmount = (amount * exchangeRate).toFixed(2);
return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spent it in following countries ${countries}`;//1 USD is worth 119 NPR
}
convertCurrency(‘USD’, ‘EUR’, 1)
.then(message => {
console.log(message)
}).catch(err => {
console.error(err)
})
Type: $ node index.js to see output in your terminal
