4

I try to understand event loop of javascript, and I am confused with fetch.

What I know

console.log("1")
Promise.resolve(2)
    .then(data => { console.log(data) })
console.log("3")

The above code executes with results: 1, 3, 2. Since in the first event loop, the engine executes log 1, resolve 2, put then block to micro tasks queue, and log 3, then searches the micro tasks queue and executes log data.

What I am confused

console.log("1")

fetch("some-url")
    .then(data => { console.log(data) })

console.log("3")

After the engine executing log 1, what does it do? Does it immediately execute a HTTP request? If so, does it put the then block to micro task queue? I think it maybe not put the then block to micro task queue, since the data it fetched may not get ready when the current queue is empty and engine starts taking the micro task queue. So how the then block enters micro tasks queue? Does the engine makes a callback to kernel telling it to put the then block into micro tasks queue when response is ready?

If the problem differs in browser and node.js, I prefer the browser answer.

Evian
  • 1,035
  • 1
  • 9
  • 22
  • I think first all console.log gets printed. It will not wait until fetch returns. – xMayank Jun 25 '20 at 01:42
  • @MayankGupta Do you mean the code will terminate after log all before fetch returns? This code is running on browser, so we don't need to worry about it terminating before getting http responses. – Evian Jun 25 '20 at 01:48

1 Answers1

7

The fetch method will indeed start a network request immediately, which will get processed "in parallel", i.e outside of the event loop.
When the the request response will be received (not its body, typically the headers), the browser will queue a new task which will only be responsible of resolving that Promise, and thus of queuing its microtask.

Kaiido
  • 123,334
  • 13
  • 219
  • 285