时间戳

首页 > 解决方案 > Chrome 中 fetch() 和 setTimeout() 的执行优先级

javascript - Chrome 中 fetch() 和 setTimeout() 的执行优先级

问题描述

根据我对事件循环的理解，以下代码将首先输出“Sync 2”，然后是“Sync 4”（同步代码），然后是“Promise 3”（fetch 返回一个 Promise，它将被放置在微任务队列中并将被执行在同步代码完成并且数据从 API 返回后），最后是“异步 1”（setTimeout 将被放置在优先级最低的宏任务/回调队列中）。

但是，在最新版本的 Chrome 中，如果我将 setTimeout() 设置为 0，如下所示，我总是在“Promise 3”之前得到“Async 1”。我有什么误解吗？一个尚未解决的 Promise 是否有可能比这里的宏任务队列中的东西优先级低？

setTimeout(() => console.log('Async 1'), 0);

console.log('Sync 2')

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits').then(() => console.log('Promise 3'))

console.log('Sync 4')

标签： javascriptasynchronouspromisefetchsettimeout

解决方案

您的fetch调用必须至少进入浏览器缓存并可能进入网络（以重新验证缓存中的某些内容），因此您不能对调用您的履行处理程序的时间做出任何假设，除非它赢了不要同步。履行处理程序调用可能会立即排队（尽管我倾向于怀疑它），在这种情况下它会在下一个任务（setTimeout回调）之前运行，但更有可能它至少会被暂时搁置。从根本上说，这fetch取决于浏览器中的实现，它依赖于实现，与任务或微任务无关。

推荐阅读