Async Await关键字 - 让我们更优化地写代码

async/await是Promise的语法糖，使异步代码看起来更像同步。可以用在并发执行请求的时候，例如前端连续多次对后端发起请求，后端又马上查询数据库，这时可能会导致数据库繁忙，而await便可以帮我们解决这个问题。

await 关键字将确保异步函数的 Promise 将在继续执行其它可能需要等待值的代码之前完成并返回结果。

        这里我们定义了一个bb函数 ，为了使这个bb函数可以异步执行，我们加一个关键字async在bb函数前面，可以看到控制台打印了一个promise对象，但是这个promise却是undefined，所以这里就需要注意一下，如果函数内并没有返回值的话，那么这个async函数就没有什么意义了，因此我们把它修改一下，return一个字符串，此时这个promise对象就有意义了

                       

而既然Promise对象已经有意义了，此时我们就可以用then来取值了。

         

因为then是可以接受resolve和reject两种状态的值的，这里很显然是resolve了，因此也可以写为：

              

当flag为true是resolve状态，当flag为false时reject状态，直接拿catch捕获

          

 

 下面我们再来了解一下await，await字面意思就是等待，我们来看一看下面的代码，bb函数中，第一行是输出了一个1，第二行中Promise.resolve了一个2，并且赋值给了two，并且这里加了await关键字，此时程序会等待直到Promise状态完成并且返回结果，虽然此时Promise是异步操作，但是此时依旧不会往下执行，因此最后的结果是顺序输出的：

           

                                   

          需要值得注意的是：同时await不能单独使用，必须配合async使用，await是基于Promise一起使用的。

        而async和await很大的作用在于优化fetch的语法，因为它们都是基于Promise的。下面写了一小段Fetch的连续请求资源的代码：

const url="https://gorest.co.in/public/v1/users"

fetch(`${url}/7/`).then(res=>res.json())
.then(json=>json.data)
.then(data=>console.log(`${data.name}`+" 7"))

fetch(`${url}/8/`).then(res=>res.json())
.then(json=>json.data)
.then(data=>console.log(`${data.name}`+" 8"))

fetch(`${url}/9/`).then(res=>res.json())
.then(json=>json.data)
.then(data=>console.log(`${data.name}`+" 9"))

虽然是请求的，但是每次输出的顺序不一定是7,8,9

 此时就可以使用async和await来修改一下代码来获得我们想要的效果了。这段代码其实就是，加了await关键字，使异步操作变得同步起来了，

let bb = async () => {
  const url = "https://gorest.co.in/public/v1/users";

  let res1 = await fetch(`${url}/7/`);
  let json1 = await res1.json();
  let name1 = await json1.data.name;

  let res2 = await fetch(`${url}/8/`);
  let json2 = await res2.json();
  let name2 = await json2.data.name;

  let res3 = await fetch(`${url}/9/`);
  let json3 = await res3.json();
  let name3 = await json3.data.name;

  console.log(name1, 7);
  console.log(name2, 8);
  console.log(name3, 9);
};

bb();

 此时多次执行，结果都是按顺序的输出

                           

但是这样写代码会有很大的累赘，因此我们使用Promise.all，需要注意的是res.json()也是会返回一个Promise的哦，因此也需要Promise.all()，并且拿await来拿到Promise执行成功的结果。最后把数组里的对象属性给map出来即可

let bb = async () => {
  const url = "https://gorest.co.in/public/v1/users";

  try {
    let responses = await Promise.all([
      fetch(`${url}/7/`),
      fetch(`${url}/8/`),
      fetch(`${url}/9/`),
    ]);

    let jsons = responses.map((response) => response.json());

    let values = await Promise.all(jsons);

    values.map((value) => {
      console.log(value.data.name);
    });
  } catch (err) {
    console.log(err);
  }
};

bb();

可以看到结果跟刚才一样的（这里没有特意打印数字来区分，可以参考前面的正确顺序） 

       

以上就是async和await的简单介绍和基本示例了，想要了解更多的可以去自行查看官方文档。