async/await 介绍以及使用

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

上一节写完了Promise的实现，这一节我们说说async/await,掌握了Promise之后async/await明显就好理解多了

async/await实际上就是通过generator来在Promise基础上封装得到的结果。 最直观的效果就是将异步的任务化成同步的使用，本质还是Promise异步任务，但是看上去是同步的使用，让看代码的时候更加直观。

举一个简单的使用的例子：

const getData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("data");
    }, 2000);
  });
};

async function fn() {
  const result = await getData();
  console.log(result);
  return result;
}

fn().then((res) => {
  console.log(res + " is then");
});

async的作用是声明当前函数是一个异步函数并返回一个Promise，可以看到fn的原型上有then方法，这里的res由fn函数里面的return的值来决定，当不返回任何值是，输出的res就是undifined。而await就是等待await后面的语句执行的结果。当await后面的语句没有完成时，是不会往下走的。它的实现是通过generator来实现的，一个暂停的效果。[想要了解generator的可以去看看](Generator - JavaScript | MDN (mozilla.org)) （我后面写async/await的实现的时候也会说一说）

它的使用场景就是await等待一个Promise的结果，值得一提的是axios是基于axios封装的，所以你可以直接await axios.create/axios.get...。