async await

- async用来声明一个异步方法

- await是用来等待异步方法执行

- async 函数返回一个pormise对象

// 下面两个方法是等效的
function f() {return Promise.resolve('test')}
async function f() {return 'test'}

• await
  • 返回的是promise的结果,如果后面跟着不是primose对象，则直接返回该结果
  • 具有阻塞性，后面的代码会进入微任务，必须等到await后面跟着的primose对象执行完毕(resolve/reject)后才能执行后面的微任务

// 案例1
async function f1() {
    console.log(1)
    // await后面的代码会进入微任务中被阻塞
    await f2()
    console.log(2)
}
async function f2 () {
    console.log('f2')
}
f1()
console.log(3)
// 输出 1 f2 3 2

• 核心点
  1. async立马返回promise.resolve()并执行里面的同步代码
  2. await 后面的代码会被打包到微任务中
  3. f2函数执行完毕之后f1函数暂停执行，开始继续执行f1函数下面的同步任务
  4. 同步任务执行完之后再执行f1函数中的微任务

// 案例2
async function f1() {
    console.log(1)
    await f2()
    console.log(2)
}
async function f2 () {
    setTimeout(() => {
        console.log('f22')
    }, 1000)
}
f1()
console.log(3)
// 输出 1 3 2 f22

• 核心点
  1. async立马返回promise.resolve()，f2函数中setTimeout函数进入宏任务队列
  2. f2函数返回promise之后并不会等setTimeout执行完，f1函数里面await后面的代码进入微任务
  3. f1函数暂停执行，此时开始执行f1函数下面的同步任务
  4. 同步任务执行完，开始执行f1中的微任务
  5. 微任务执行完，再开始执行宏任务setTimeout

// 案例3
async function f1() {
    console.log(1)
    await f2()
    console.log(2)
}
async function f2 () {
    // await 后面跟着的不是promise，会立即返回一个promise.resolve()表示promise已经解决，并不会等待执行
    // 其实执行和 案例2是一个意思
    await setTimeout(() => {
        console.log('f22')
    }, 1000)
}
f1()
console.log(3)
// 输出 1 3 2 f22

// 案例3
async function f1() {
    console.log(1)
    await f2()
    console.log(2) // 在await之后被打包进了微任务中
}
async function f2 () {
    await new Promise(function(resolve) {
        // 这里的resolve被立即执行并返回结果，返回的结果是一个setTimeout函数
        resolve(
            // 这里setTimeOut会被当作一个返回值立即完成Promise，Promise不会等待setTimeout执行完毕才返回，最后还是和案例2一样的结果
            setTimeout(() => {
                // 进入宏任务中
                console.log('f22')
            }, 1000)
        )
    })
}
f1()
console.log(3)
// 输出 1 3 2 f22

// 案例
async function f1() {
    console.log(1)
    await f2() // 需要等待promise的状态改变为完成才能执行后面操作
    console.log(2) // 虽然是微任务，但是需要等待promise状态改变被解决后才开始进入微任务队列
}
async function f2 () {
    // 这里等同于 return new Promise
    await new Promise(function(resolve) {
        // 此时的Promise会进入pending状态，等待状态改版执行resolve
        setTimeout(() => {
            // promise状态在1秒之后才会被解决
            resolve(console.log('f22'))
        }, 1000)
    })
}
f1()
console.log(3)
// 输出 1 3 f22 2 如何出现

async function f1() {
    console.log(1)
    await f2()
    console.log(2)
}
async function f2 () {
    await new Promise(function(resolve) {
        setTimeout(() => {
            resolve(console.log('f22'))
        }, 1000)
    })
}
await f1() // 这里加了await 所以需要等待f1完成之后才能之后后面的代码
console.log(3) // 被await放入了微任务中
// 输出 1 f22 2 3