如何用实例掌握Async/Await

今天让我们一起来探讨如何用实例掌握Async/Await

目录
1、简介（callbacks, promises, async/await）
2、实例—货币转换器从2个API’s接收异步数据。

简介
Async/await是一种编写异步代码的新方法。它是建立在promises之上的，所以也是非阻塞。
最大的差别在于异步代码看起来更靠近同步代码。这就是它的关键所在。
以前的异步代码选项是callbacks and promises。

回调函数程序

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

回调的问题——臭名昭著的回调地狱
在回调函数中嵌套回调函数很快就会变成这样:

回调地狱
回调被嵌套在其他回调的几层的情况，可能使代码难以理解和维护。

Promises程序

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);
});

Promise函数返回一个Promise，该Promise表示函数的进程。resolve函数向Promise实例发出它已经完成的信号。
然后，我们可以调用promise函数的then()和.catch():
then —在 promise完成后运行传递给它的回调。
catch —运行一个回调，当发生错误时传递给它。

异步函数
Async函数为我们提供了一个干净简洁的语法，使我们能够编写更少的代码来实现与promises相同的结果。Async只不过是promises的语法糖。Async函数是通过在函数声明之前加上Async来创建的，如下所示:

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

异步函数可以用await暂停，await是只能在异步函数中使用的关键字。await返回异步函数完成后返回的任何内容。
这是promises和async/ wait之间的区别:

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

Async/ wait看起来类似于同步代码，而且同步代码更容易理解。现在我们已经介绍了基本知识，让我们继续看真实世界中的例子!

**货币转换器
项目说明和设置**
在本教程中，我们将构建一个简单但有教育意义、有用的应用程序，它将提高您对Async/ wait的整体认识。
这个程序将体现我们想要从某种货币代码转换为另一种货币代码以及金额。然后，程序将根据来自api的数据输出正确的汇率。

在这个应用程序中，我们将从两个异步源接收数据:
1、货币层—— https://currencylayer.com—您需要免费注册，这样才能使用API访问密钥。这个API将为我们提供计算货币间汇率所需的数据。
2、其他国家— http://restcountries.eu/—这个API会告诉我们在哪里可以使用我们刚刚兑换的货币。

首先，创建一个新目录并运行 npm init，跳过所有步骤，然后通过键入npm i --save axios.安装axios。新建一个文件夹命名为currency-converter.js.。

让我们深入研究async/await
我们这个程序的目标是有三个函数。不是一个，不是两个，而是三个异步函数。第一个函数是获取关于货币的数据。第二个函数是获取关于国家的数据。第三个函数将把信息收集到一个地方并很好地输出给用户。

第一个函数—异步接收货币数据
我们将创建一个异步函数，它将接收fromCurrency和toCurrency两个参数。

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

现在我们需要获取数据。使用async/ wait，我们可以直接将数据分配给一个变量；不要忘记注册并输入您自己正确的访问密钥。

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和 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);
  });

你将收到的输出:

今天的分享就到这里，希望本文能帮助到您！

点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
关注公众号「新前端社区」，享受文章首发体验！
每周重点攻克一个前端技术难点。