async和await的作用

• async/await是一种建立在Promise之上的编写异步或阻塞代码的新方法，被普遍认为是js一步操作的最终且最优雅的解决方案。相对于Promise和回调，它的可读性和简洁度都更高。一直.then()也不好看。
• 所以从语义上就很好理解 async用于声明一个function是异步的，而await用于等待一个异步方法执行完成。一个函数如果加上async，那么该函数返回的是一个Promise

  async function test() {
      return "1"
  }
  console.log(test()) // -> Promise {<resolved>: "1"}
  

• async函数返回的是一个Promise对象，如果在async函数中直接return一个量，async会把这个量通过Promise.resolve()封装成Promise对象返回。

  function A(n) {
          return new Promise(resolve => {
              setTimeout(() => resolve(n + 200), n);
          });
      }
  
      function step1(n) {
          console.log(`step1 with ${n}`);
          return A(n);
      }
  
      function step2(n) {
          console.log(`step2 with ${n}`);
          return A(n);
      }
  
      function step3(n) {
          console.log(`step3 with ${n}`);
          return A(n);
      }
  

• 使用Promise

  function doIt() {
      console.time("doIt");
      const time1 = 300;
      step1(time1)
          .then(time2 => step2(time2))
          .then(time3 => step3(time3))
          .then(result => {
              console.log(`result is ${result}`);
          });
  }
  doIt();
  // step1 with 300
  // step2 with 500
  // step3 with 700
  // result is 900
  

• 使用async/await

  async function doIt() {
  console.time("doIt");
  const time1 = 300;
  const time2 = await step1(time1);
  const time3 = await step2(time2);
  const result = await step3(time3);
  console.log(`result is ${result}`);
  }
  doIt();
  

  相比于Promise，async/await能更好的处理then链
  await关键字只能在async function中使用，在任何非async function的函数中使用await关键字都会抛出错误。await关键字在执行下一行代码之前 等待右侧表达式（可能是一个Promise）返回。

• 优缺点：

  async/await的优势在于处理then的调用链，能够更清晰准确的写出代码，并且也能解决回调地狱的问题。当然也存在一些缺点，因为await将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了await会导致性能上的降低。