宏任务微任务题

[yiqia]

async function async1() {
console.log('async1 start')
await async2().then(res=>console.log(res))
console.log('async1 end')
}
async function async2() {
console.log('async2')
return 123
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')

打印的结果以及为什么顺序是这样

[ainuo5213]

/**

• script start 宏任务队列：setTimeout
• async1 start 微任务队列：123
• async2 微任务队列：123，async1 end，await执行完之后会将之后的代码放进微任务队列（可以理解为回调）
• promise1 微任务队列：promise2
• script end 开始执行微任务队列里的任务
• 123
• promise2
• async1 end 开始执行宏任务队列里的任务
• setTimeout

*/

[aotemj]

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

async function async2() {
    console.log('async2');
    return 123;
}

console.log('script start');

setTimeout(function () {
    console.log('setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});

console.log('script end');

打印的结果以及为什么顺序是这样

[aotemj]

建议添加一下代码包裹，方便读者阅读 @yiqia

[aotemj]

建议添加一下代码包裹，方便读者阅读 @yiqia

[GdgmPhs]

不太理解async1 end比promise 2先放进微队列，为啥promise 2先输出

[1529829142]

@GdgmPhs 你可以这么理解，await 语句创建并返回了一个promise，await 后面的代码相当于then()的回调函数

async function async1() {
  console.log('2 async1 start');
  // await async2().then(res => console.log(res));
  // console.log('async1 end');
  // 相当于以下代码
  new Promise((resolve) => {
    async2()
    resolve(123)
  }).then((res) => {
    console.log('6 ' + res)
  })
  .then(() => {
    console.log('8 async1 end')
  })
}

async function async2() {
  console.log('3 async2');
  return 123;
}

console.log('1 script start');

setTimeout(function () {
  console.log('9 setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
  console.log('4 promise1');
  resolve();
}).then(function () {
  console.log('7 promise2');
});

console.log('5 script end');