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

Question

以我对事件循环的理解，下面的代码会先输出'Sync 2'然后'Sync 4'（同步代码），然后'Promise 3'（获取returns一个Promise它将被放置在微任务队列中，并在同步代码完成并且数据从 API 返回后执行），最后 'Async 1' （setTimeout 将被放置在 macrotask/callback 队列中最低优先级）。

然而，在最新版本 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')

Answer 1

(fetch returns a Promise which would be placed in the microtask queue and will be executed after the synchronous code finishes and data comes back from the API)

仅当返回的 Promise 立即解析 时才会如此 - 例如 Promise.resolve。如果 fetch 返回的 Promise 立即得到解决，那么你是对的，Promise 3 会在 setTimeout 之前登录。

但是 fetch 不会立即解决 - 它需要端点首先响应，这需要 一些时间，所以你首先看到 setTimeout 日志。

Answer 2

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

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

Executing priority of fetch() and setTimeout() in Chrome

javascript

asynchronous

fetch

settimeout

promise