如何用实例掌握Async/Await

今天让咱们一块儿来探讨如何用实例掌握Async/Await

目录
一、简介（callbacks, promises, async/await）
二、实例—货币转换器从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的数据输出正确的汇率。

在这个应用程序中，咱们将从两个异步源接收数据:
一、货币层—— currencylayer.com—您须要免费注册，这样才能使用API访问密钥。这个API将为咱们提供计算货币间汇率所需的数据。
二、其余国家— 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);
  });
复制代码

你将收到的输出:

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

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