当前位置：首页 > article >正文

【错题本】js事件循环机制下，记录一个意外错误

article 2025/2/12 4:19:50

js的事件循环机制是前端的基础概念。下面我们先看两段代码：

setTimeout(()=>{
    console.log("children2")
    Promise.resolve().then(()=>{
        console.log("children3")
    })
},0)
new Promise(function(resolve,reject){
    console.log("children4")
    setTimeout(function(){
        console.log("children5")
        resolve("children6")
    },0)
}).then(res=>{
    console.log("children7")
    setTimeout(function(){
        console.log(res)
    },0)
})
console.log("start")

上面的代码输出：children4、start、children2、children3、children5、children7、children6

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");
}, 0);

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
第二道题时，我出现一个疑惑，当await 后面跟的不是一个 Promise 对象（而是一个同步值或已经解决的 Promise），那么await 后面的代码会被放入微任务队列吗?
验证代码：

async function example() {
    console.log('Start');
    await Promise.resolve(); // 立即解决的 Promise
    console.log('After await');
}

console.log('Before async call');
example();
console.log('After async call start');

// 输出顺序：
// Before async call
// After async call start
// Start
// After await