async 与 await

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

async

用来声明异步函数，返回一个promise,是generator和promise结合的语法糖，可以用同步的方法写异步，并且更加优雅

async函数的返回值是一个promise

假设你返回一个普通对象或者基本类型，会自动用Promise.resolve包裹一下，使之成为状态为resolved的promise,因为函数没有return会返回undefined,所以下面res是undefined

 async function fn1() {
     console.log('2323')
 }
 var x=fn1().then(res=>{
   console.log('ok',res)
 });
 console.log(x,'222')

    async function fn1() {
      console.log("2323");
      return "普通字符串";
    }
     fn1().then((res) => {
      console.log("ok", res); // ok 普通字符串
    });

如果返回的是promise对象，那么就原封不动的返回这个promise即可，会根据promise的最终状态调用成功或者失败函数，当然也可以catch和finally

   const p1 = new Promise((res, reject) => {
      setTimeout(() => {
        reject("reject");
      }, 1000);
    });
    async function fn1() {
      return p1;
    }
    fn1().then(
      (res) => {
        console.log("ok", res);
      },
      (err) => {
        console.log(err,'失败了');
      }
    );

await

await 原本只能在async function中使用，bable7.7中实现了await顶层作用域单独使用，await 可以等待异步代码有结果后再向下执行，也就是可以让异步用同步的方式来执行，完美解决了回掉地狱，增加了代码的可读性。

await 语法后边的值如果不是promise对象，会用Promise.resolve包装成promise对象，并且会等待这个promsie的状态从pedding变成一个结果才往下执行，promise是微任务，自然await后面的代码块会加入到微任务的队列，所有一点遇到await，后面的代码就进入微任务，所以要等主线程执行完，再执行这个promsie的结果， 所以下面先打印最后一句话

  <script>
    const p1 = new Promise((res, reject) => {
      res("成功");
    });
    async function fn1() {
      const p1Value = await 3;
      console.log(p1Value, "p1");
    }
    fn1();
    console.log("这里先执行");

举例

如果多个异步之间有依赖关系，这次的请求参数依赖上一个请求的结果，async await语法可以很清晰的体现出来，

    const p1 = function (num1, num2) {
      return new Promise((res) => {
        setTimeout(() => {
          res(num1 + num2);
        }, 1000);
      });
    };
    async function fn1(a, b, c) {
      const ab = await p1(a, b);
      const abc = await p1(ab, c);
      console.log(abc);
    }

    fn1(1, 2, 6);
    console.log("这里先执行");

因为async function 会把返回值包装成promsie,await正好可以等待promise,并得到resolve结果，所以可以在async函数里，使用await关键字来等待另个一个async函数执行完成，非常优雅

    const p1 = function (num1, num2) {
      return new Promise((res) => {
        setTimeout(() => {
          res(num1 + num2);
        }, 1000);
      });
    };
    async function fn1(a, b, c) {
      const ab = await p1(a, b);
      const abc = await p1(ab, c);
      return abc;
    }

    (async function () {
      var sum = await fn1(1, 2, 6);
      console.log(sum);
    })();

trycatch

trycatch捕获异常，错误处理，形成完美闭环，是现在开发处理异步的完美方案.

    const p1 = function (num1, num2) {
      return new Promise((res,reject) => {
        setTimeout(() => {
          reject(num1 + num2);
        }, 1000);
      });
    };
    async function fn1(a, b, c) {
      try {
        const ab = await p1(a, b);
        const abc = await p1(ab, c);
        return abc;
      } catch (error) {
        console.log(error,'错误了')
      }
    }

    (async function () {
      var sum = await fn1(1, 2, 6);
      console.log(sum);
    })();