如何理解JavaScript的异步行为？为何Promise链式调用输出不符合预期？

先来看你的代码和遇到的执行顺序困惑：

你的测试代码：

console.log(1);
let myPromise = () => {
    //return Promise.resolve("success");
    return new Promise((resolve, reject) => {
        for (let i = 0; i < 10000000; i++) {
            let p = i ** 2;
        }
        console.log('loop complete');
        resolve('success');
    })
}
console.log(2);
myPromise()
    .then((m) => {
        console.log(m);
        return myPromise()
    })
    .then((m) => console.log(m))
    .catch((e) => console.log(e))
console.log(3);

你预期输出：1 2 loop complete success loop complete success 3
实际输出：1 2 loop complete 3 success loop complete success

下面我来拆解背后的执行逻辑：

首先要明确JavaScript的单线程+事件循环核心机制，以及Promise的两个关键执行阶段：

• JavaScript主线程优先执行所有同步任务，只有当主线程空闲时，才会去处理任务队列里的异步任务
• Promise的执行器函数（executor）是同步执行的——就是你写在new Promise()里的那个匿名函数，里面的代码会立刻在主线程上运行
• .then()/.catch()的回调函数属于微任务（microtask），会被放到微任务队列中，必须等当前主线程的所有同步任务执行完毕后，才会被依次执行

现在一步步梳理代码的执行流程：

1. 执行console.log(1) → 输出1
2. 同步定义myPromise函数（仅定义，不执行内部逻辑）
3. 执行console.log(2) → 输出2
4. 调用myPromise()：
   • 立刻触发Promise的执行器函数，跑那个百万次的for循环，完成后打印loop complete
   • 调用resolve('success')，标记Promise为已完成状态，将第一个.then()的回调加入微任务队列
5. 执行console.log(3) → 输出3（这是当前主线程最后一个同步任务，执行完后主线程进入空闲状态）
6. 主线程开始处理微任务队列：
   • 执行第一个.then()的回调：打印success，然后调用myPromise()
     • 再次触发Promise的执行器函数，跑循环、打印loop complete，调用resolve('success')，将第二个.then()的回调加入微任务队列
   • 继续处理新加入的微任务：执行第二个.then()的回调，打印success

这就是为什么实际输出顺序和你预期不同的原因——你误以为.then()的回调是同步执行的，但实际上它们是异步微任务，必须等主线程的同步代码（包括最后的console.log(3)）全部跑完才会启动。而Promise执行器里的循环和打印是同步代码，所以会在3之前输出。

内容的提问来源于stack exchange，提问作者Probhakar Sarkar