我同时使用 setTimeout 和获取 API，机器人不知道哪个会先执行？

Question

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
setTimeout(()=>{
console.log("Callback after delay")
},1000)
setTimeout(()=>{
console.log("Callback with no delay")
})
console.log("HI this is test")

它给出以下输出：

HI this is test
Callback with no delay
{userId: 1, id: 1, title: 'delectus aut autem', completed: false}
Callback with delay

当promise中的回调转到microtask queue时，应首先执行fetch中的回调，然后使用no delay和delay执行setTimeout代码

Answer 1

fetch和setTimeout都异步运行。

区别在于——

无法保证fetch会在什么时候返回响应。中的代码将在收到响应时执行(当Promise被解析时(。

但是，在setTimeout的情况下，您提供超时。浏览器的内部Web API运行给定持续时间(毫秒(的计时器。计时器超时后，您的代码将被执行。在你的例子中，你有两个setTimeout——一个是0毫秒，另一个是1000毫秒。所以，首先你会看到"Callback with no delay"，然后在一秒钟后看到"Callback after delay"。

console.log()像同步代码一样运行。因此，当执行这一行时，您将在控制台上看到"HI this is test"文本。

您看到的是此订单，因为fetch响应在1秒之前返回。fetch响应的位置将根据网络速度和服务器的响应时间而变化。

HI this is test
Callback with no delay
{userId: 1, id: 1, title: 'delectus aut autem', completed: false}
Callback with delay

然而，这两条消息将始终以相同的顺序位于顶部：

HI this is test
Callback with no delay

我希望解释清楚！

Answer 2

正如@Andy所提到的，fetch和setTimeout是异步的，当它完成时会执行，所以例如，如果fetch方法花了一秒钟以上的时间来获得data，它将在延迟后的setTimeout之后执行。

如果你想先执行fetch方法，然后再执行setTimeout，你需要await它

(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
const result = await response.json();
setTimeout(()=>{
console.log("Callback after delay")
},1000)
setTimeout(()=>{
console.log("Callback with no delay")
})
console.log("HI this is test")

})

现在fetch将执行第一个。