The browser Fetch API often gets reduced to a rote snippet of promise chaining in introductory tutorials. You invoke fetch with a URL, await the response, and parse it as JSON. Yet skipping the underlying network pipeline leaves developers baffled when timeouts, CORS errors, or chunked transfer streams arrive in production.
Initiating the Network Handshake
Calling fetch instantly hands control over to the browser native platform layer, freeing JavaScript single thread to continue handling user interactions. The browser checks its cache, performs DNS resolution if the IP address is unknown, and opens a TCP socket connection secured via TLS.
The browser constructs the raw HTTP request headers and flushes the payload across the wire. Throughout this entire phase, your JavaScript execution context is not paused. It has merely registered a pending promise in the event loop queue.
Streaming Bytes and the Microtask Queue
The instant the remote server sends back HTTP status headers, the fetch promise resolves into a Response object. At this stage, the full response body may not even have arrived at your network card. The Response object wraps a readable stream that pulls raw bytes incrementally into memory.
Calling the json or text method initiates an explicit second asynchronous operation that buffers that stream to completion. Knowing that the initial resolution signifies header delivery rather than complete data arrival prevents subtle race conditions in modern front-end engineering.