# jakechampion/fetch architecture

> Architecture diagram of the GitHub repository jakechampion/fetch, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jakechampion/fetch
- Repository: https://github.com/jakechampion/fetch

## Overview

This is a browser-only `window.fetch` polyfill, implementing a Promise-based subset of Fetch on top of XMLHttpRequest. The principal workflow is an application calling the polyfill and receiving a Response; the README documents request bodies, response parsing and metadata, credentials, and abort usage. The sampled source also shows request/response types, header handling, body-reading helpers, and XMLHttpRequest event handling. Several implementation connections are omitted from the excerpts, so the graph avoids guessing their call sequence.

Main entry points: [`fetch.js`](https://github.com/jakechampion/fetch/blob/main/fetch.js) (XHR transport)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["Fetch API"]
  node_fetch_api["Fetch polyfill<br/>[fetch.js]"]
end

subgraph group_models["Request And Response"]
  node_request["Request options<br/>[fetch.js]"]
  node_headers["Headers<br/>[fetch.js]"]
  node_response["Response<br/>[fetch.js]"]
  node_body_readers["Body readers<br/>[fetch.js]"]
end

subgraph group_transport["Browser Transport"]
  node_xhr_transport["XHR transport<br/>[fetch.js]"]
end

node_application(("Web application"))
node_browser_xhr["Browser XMLHttpRequest"]

node_application -->|"calls"| node_fetch_api
node_xhr_transport -->|"uses"| node_browser_xhr
node_xhr_transport -->|"constructs"| node_response

click node_fetch_api "https://github.com/jakechampion/fetch/blob/main/fetch.js"
click node_request "https://github.com/jakechampion/fetch/blob/main/fetch.js"
click node_headers "https://github.com/jakechampion/fetch/blob/main/fetch.js"
click node_response "https://github.com/jakechampion/fetch/blob/main/fetch.js"
click node_body_readers "https://github.com/jakechampion/fetch/blob/main/fetch.js"
click node_xhr_transport "https://github.com/jakechampion/fetch/blob/main/fetch.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_fetch_api,node_browser_xhr toneBlue
class node_request,node_headers,node_response,node_body_readers toneAmber
class node_xhr_transport toneMint
class node_application toneIndigo
```

## Components

### Fetch API

- [Fetch polyfill](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`

### Request And Response

- [Request options](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`
- [Headers](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`
- [Response](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`
- [Body readers](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`

### Browser Transport

- [XHR transport](https://github.com/jakechampion/fetch/blob/main/fetch.js): `fetch.js`

### Other components

- **Web application**
- **Browser XMLHttpRequest**

## Connections

- Web application → Fetch polyfill: calls (evidence: `README.md`)
- XHR transport → Browser XMLHttpRequest: uses (evidence: `fetch.js`)
- XHR transport → Response: constructs (evidence: `fetch.js`)