async&await函数 - 技术栈

一种更简洁的方式写出基于Promise的异步行为

async函数的返回值为一个promise，通过then和catch来捕获内部的返回值

1.特性:

async函数 内部会返回一个promise对象，如果看起来不是promise，那么它将会隐式的包装在promise中（如果代码里返回的不是promise对象，会将其包装成promise对象）

javascript 复制代码

async function fn () {
  return 'hello world' 
}

await 能获取到promise状态改变后的值，如果后面不是一个promise，await 会把该值转换为已正常处理的Promise，结果为undefined

javascript 复制代码

async function fn () {
  await 1 
}

await后面promise的状态是reject，则await后的代码不会执行，async函数将返回状态为reject的promise

javascript 复制代码

    async function fn() {
      await cosle.log("sdf");
      console.log(111);
      
    }
    console.log(fn());

async函数内部如果存在await，await表达式会暂停整个async函数的执行，等当前位置promise状态改变后才能恢复

2.面试题分析：

javascript 复制代码

    async function fn() {
      setTimeout(function () {
        console.log(1)
      }, 0)
      Promise.resolve().then(() => console.log(4))
      await setTimeout(function () {
        console.log(5)
      }, 0)
      await Promise.resolve().then(() => console.log(6))
      Promise.resolve().then(() => console.log(7))
      console.log(3)
    }

    fn()

    //4 6 3 7 1 5

分析：

javascript 复制代码

宏任务：setTimeout 1；setTimeout 5

    微任务： 4 6--》7

    1.setTimeout 1会放在宏任务中

    2.Promise.resolve().then(() => console.log(4))会放在微任务中

    3.await setTimeout(function () {

        console.log(5)

      }, 0)

      await后面跟的不是promise对象，会将其转为promise对象，并返回undefined

      所以这段代码等价于：

      await Promise.resolve(setTimeout(function(){ console.log(5) },0) 此时有个定时器，所以会放入宏任务中

    4. await Promise.resolve().then(() => console.log(6)) 执行后会将then后面放入微任务中，

    ***到此同步代码执行完（因为await会等待结果输出后再执行下面代码，所以下面的都不开始执行，而这个微任务在微任务4后面，所以需要先执行4，即打印4,6，

     打印完后，await当前结果输出继续往下，将7设置进微任务

    5.Promise.resolve().then(() => console.log(7))放入微任务中

    6. 打印console.log(3)

    打印完3以后重新执行微任务7，在执行宏任务 1,5

 最后为4,6,3,7,1,5