Fetch, AbortController and body streams

A fulfilled promise does not mean HTTP success.

UnderstandStudy an examplePractise

Understand the concept

Fetch generally fulfils for HTTP 404/500 responses; inspect ok/status. Network and CORS failures follow different paths. Parsing a 204 as JSON can fail. Know the response contract.

Bodies are streams consumed once by methods such as json or text. Cloning or buffering enables another read at a potential memory cost. AbortController can stop client work but does not guarantee server rollback.

credentials:include does not override SameSite or CORS. no-cors yields opaque responses. Wrappers can standardise errors, timeouts and correlation without blindly retrying every failure.

WHEN TO USE IT

Write reliable Next.js API clients.

COMMON PITFALL

Assuming catch handles every unsuccessful HTTP status.

01 / PRACTICE

One topic. Three levels of depth.

HTTP / illustrative example

const response = await fetch("/api/projects");
if (!response.ok) throw new Error(`HTTP ${response.status}`);

Checks HTTP status explicitly.

This page does not send requests to external servers. Messages are readable HTTP/1.1 illustrations, not HTTP/2 or HTTP/3 wire dumps. example.test is reserved for examples. Run commands and JavaScript only in your own test environment; never publish real tokens or cookies.

02 / YOUR TURN

Try it yourself first.

Must catch run when Fetch receives a 403?

Show the solution and explanation

Worked solution

Check response.ok / response.status

No; inspect the response explicitly.

RasimAtaberkŞahin

Understand the concept

One topic. Three levels of depth.

Try it yourself first.