Deep Dive

How fetch() Actually Works

A full end-to-end mental model — from JavaScript through WebIDL, native C++, and Node.js streams — explained step by step. Click any block in the diagram, any step card, or any highlighted term to open it up.

09
Steps traced
05
Layers
05
Lock-this-in
01
Promise
01 — END-TO-END FLOW

From a call to a callback

A single fetch("/api/users") crosses the JavaScript layer, the WebIDL binding, the native C++ engine, the browser networking stack, , and Node.js — then travels back. The dashed seam is where no JavaScript is involved anymore — pure bytes over a TCP socket.

Tap any block to open its detail
JS layer WebIDL C++ engine network Node.js
01 · javascript JS fetch() pure JS · main thread 02 · binding WebIDL Binding JS to C++ safely 03 · native Browser C++ Fetch Engine CORS · headers · cache 04 · event loop Promise created · pending JS thread free 05 · transport Network Stack → Internet off the main thread 06 · over the wire Raw HTTP · pure bytes over TCP no JS involved the wire pure bytes over a TCP socket request ↓ ↑ response 07 · node.js libuv → IncomingMessage RequestListener(req, res) readable + writable ServerResponse → Internet 09 · response journey Browser C++ → JS Response → Promise full stack in reverse native Response object 10 · promise resolution .then() Microtask Queue resolves on headers microtask · not full body Browser · JS, WebIDL, C++ Node.js territory Back in the browser · JS regains control
02 — STEP-BY-STEP BREAKDOWN

Nine steps, top to bottom

Each card opens a full detail panel — the explanation, the real code, and the "lock this in" takeaway. The same panels open from the diagram above.

Complete Mental Model

The complete picture, collapsed into a scannable reference.

JS Layer
fetch() is called — JS thread
WebIDL
Maps JS call → C++ safely. Defines and return types.
C++ Fetch
CORS, headers, credentials, caching — all resolved natively
Network Stack
DNS → TCP → TLS → HTTP framing — all off the main thread
Node.js
libuv receives bytes → HTTP parser → IncomingMessage + ServerResponse streams
Response
Response travels back, browser parses headers → Promise resolves as microtask
JS Resumes
.then() callbacks run — body is still a stream, consumed asynchronously
fetch() is a JS API, implemented in native code, backed by WebIDL, executed by a browser networking stack, fulfilled via Promises, and ultimately handled by Node.js as streams through IncomingMessage and ServerResponse.
03 — THE LEXICON

Glossary

Every highlighted term across the page resolves here, grouped by area. Click a heading to expand a group, or a card to pin its definition.

Back to JIT-Atlas