使用fetch时callback未按预期执行：promise完成后未中途触发

嘿，我完全懂你现在的困惑——这可不是你的代码写错了，而是JavaScript的**事件循环（Event Loop）**机制在背后起作用，咱们一步步拆解清楚：

核心原因：JavaScript是单线程的，同步任务优先执行 #

JavaScript从设计之初就是单线程语言，这意味着同一时间只能执行一个任务。它的任务执行顺序遵循这样的规则：

• 所有同步任务会被直接放到「调用栈」里，依次执行，直到调用栈完全清空。
• 异步任务（比如fetch的网络请求）会交给浏览器/Node.js的底层API去处理，当任务完成（比如fetch拿到响应，Promise被fulfilled），对应的回调函数会被放到「任务队列」里排队。
• 只有当调用栈里的所有同步任务都执行完了，事件循环才会去任务队列里取出回调，放到调用栈中执行。

对应你的场景来理解 #

你写的for循环属于同步任务，会占据调用栈直到整个循环跑完。而fetch的回调虽然会在Promise fulfilled后被标记为“可以执行”，但它只能乖乖在任务队列里等着，直到for循环这个同步任务彻底执行完毕、调用栈空了之后，才会轮到它运行。

举个简单的代码例子验证这个逻辑：

console.log('启动代码');

// 发起fetch请求
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(data => {
    console.log('fetch回调执行：', data.title);
  });

// 一个耗时的同步循环
for (let i = 0; i < 10000; i++) {
  if (i === 5000) {
    console.log('循环执行到一半啦');
  }
}

console.log('所有同步代码执行完毕');

这段代码的输出顺序一定是：

1. 启动代码
2. 循环执行到一半啦
3. 所有同步代码执行完毕
4. fetch回调执行： delectus aut autem

完全符合你看到的现象——回调要等所有同步代码跑完才执行。

补充：微任务和宏任务的区别 #

这里额外提一句：fetch的回调属于宏任务，而Promise的then/catch/finally、async/await这类属于微任务。微任务会在同步任务结束后、宏任务执行前优先处理，但不管是微任务还是宏任务，都得等调用栈里的同步任务全部执行完才能启动。所以哪怕是微任务，也没法打断正在运行的for循环。

总结 #

你的预期其实是对异步执行模型的小误解：Promise fulfilled后确实会触发回调，但这个回调不会“插队”打断正在执行的同步代码，必须等当前调用栈清空（所有同步任务完成）后，才会被事件循环调度执行。这是JavaScript单线程模型下的正常行为哦！

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