[譯] 如何在實際開發案例中掌握 Async/Await

原文地址: How To Master Async/Await With This Real World Example
原文做者: Adrian Hajdin
譯者: arzh
推薦理由: ES6中的異步方法已經成爲開發中不可或缺的一部分，本篇文章可讓你從實際開發中快速瞭解及學習 Async/Await 的使用

目錄

1. 介紹(callbacks,promise,async/await)
2. 現實案例--從兩個API接收異步數據的貨幣轉換器

進入正文以前

在寫這篇文章的同時，我還建立了一個 YouTube 視頻! 你能夠邊看邊寫代碼。我建議你先閱讀這篇文章，而後隨着視頻一塊兒編寫代碼。

視頻鏈接: Learn Async/Await in This Real World Project

介紹

Async/Await 是一種編寫異步代碼的新方法。 它創建在 promise 之上，所以，它也是非阻塞的。

最大的區別在於 Async/Await 的使用使異步代碼看起來有點像同步代碼。 這就是它的全部力量所在。異步代碼之前一般有 callbacks 和 promise 兩種選擇。

callbacks函數的使用

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

callbacks函數的問題--回調地獄

在回調函數中嵌套回調函數很快就會變成這樣:

回調被嵌套在其餘回調中有好幾層之深，可能使理解和維護代碼變得困難。

promise的使用

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 函數返回一個表示該函數過程的 Promise。resolve 函數向 Promise 實例發出信號，告知它已完成。

而後咱們能夠在該 promise 函數中調用 then() 以及 catch() 函數:

1. then — 運行 promise 函數完成時傳遞給它的回調
2. catch — 運行 promise 函數錯誤時傳遞給它的回調

Async函數

Async 函數爲咱們提供了一種乾淨簡潔的語法，使咱們可以編寫更少的代碼來實現與 promise 相同的結果。Async 只不過是 promise 的語法糖

Async 函數是經過在函數聲明以前加上單詞 async 來建立的

const asyncFunction = async () => {
  // Code
}
複製代碼

Async 函數可使用 await 暫停，該關鍵字只能在 Async 函數中使用。 Await 返回 async 函數完成時返回的任何內容。

這是 promise 和 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;
複製代碼

因爲全部數據都是從歐元轉換而來，咱們將建立一個名爲euro的變量，它將等於咱們要轉換的（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和amount做爲參數

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上查看，由於我剛剛建立了一個頻道! 點擊這裏，有不少有趣的東西即將到來！