setTimeout、Promise、Async/Await 的区别

setTimeout

• setTimeout回调函数放在宏任务队列里，等到执行栈清空后执行

Promise

本身是同步的立即执行函数，会先执行then catch,当主栈完成后，才会调用resolve/reject

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

• promise.then里的回调函数放到相应宏任务的微任务队列中，等宏任务里边的同步代码执行完后再执行；

• async函数表示里面可能有异步方法,
  async 函数返回一个 Promise 对象,因此我们也可以使用then来处理后续逻辑。

  
  
  image.png

func1().then(res => {
    console.log(res);  // 30
})

• await后面跟一个表达式，async方法执行时，遇到await后会立即执行表达式，然后把表达式后边的代码放到微任务队列中，让出执行栈让同步代码先执行；

由于因为async await 本身就是promise+generator的语法糖。所以await后面的代码是microtask。所以

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

等价于

async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(() => {
                console.log('async1 end');
        })
}

PS 面试题

// 今日头条面试题
async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')
//答案：
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout