Fetch and HTTP
This topic is about the network round trip itself. Awaiting a response, distinguishing a failed request from an unsuccessful status, sending a JSON body with the right headers, timing out or cancelling an in-flight call, retrying without duplicating a side effect, and typing an unknown payload all belong here. Examples show the exact call sequence and state which assumption the server must satisfy, including CORS and content-type expectations. Browse the task groups to compare reading a response with writing one, then use the relationship links to reach transformation examples that run after the bytes arrive. Each page also names the failure modes that a bare then chain tends to hide from you during debugging.
In scope: Include examples centred on the request lifecycle: headers, bodies, status handling, timeouts, and aborts. Out of scope: Exclude pure response-shaping code that never touches the request lifecycle.
6 published examples across 2 primary task groups. Read the group heading to find the task you are solving, then pick the Example whose assumptions match your page.
Fetch API data
3 examplesSend a request, await the response, and handle status, timeout, and cancellation behaviour.
Cancel an in-flight fetch with AbortController
Abort a pending request when the input changes or the view unmounts, so a slow response cannot overwrite a newer one or update a dead component.
Fetch JSON and separate a failed request from a failed status
Await a JSON response, then branch on transport failure, HTTP status, and malformed body separately instead of catching everything together.
Type a generic fetch hook that returns a known payload
Wrap fetch in a hook whose generic payload type is proven by a runtime predicate, so a component only renders data it has already accepted.
Transform data
3 examplesReshape collections and records in memory into the structure the next step needs.
Narrow an unknown API response with type guards
Layer small type predicates over an unknown response and return a narrowing result, so the compiler only exposes fields a runtime check has accepted.
Normalize an API payload into a typed list
Unwrap whichever envelope an API returns, check each row field by field, and get one typed list plus a named reason for every entry that was dropped.
Transform server records into the view model a component renders
Map validated server records onto the fields a component renders, keeping fallback text, badge labels, and time formatting in one reviewable function instead of in the markup.
Adjacent navigation
- Parent: Home
- Browse by language: JavaScript
- Browse by language: TypeScript
- Other topics: CSS Layout
- Other topics: Data Transformation
- Other topics: DOM Events
- Other topics: Form Validation
- Other topics: React State
- Or search: Search examples