fetch() returns a promise for a Response, not for parsed JSON. When a response is available, that promise can fulfill even if the HTTP status is 404 or 500. Your code must check the status, then separately read the response body.
What does fetch() return?
Call fetch(resource, options) with a URL or a Request. Options can set details such as the method, headers, body, mode, and credentials; the default method is GET. The browser processes the request according to the Fetch rules, which cover more than sending a message directly to an origin server: redirects, cross-origin checks, content security policy (CSP), and service workers can all affect the path.
As an Amazon Associate I earn from qualifying purchases.
The call returns a promise for a Response. In normal cases, that promise fulfills when a response is available—MDN describes this as happening once the server responds with headers. The response object contains status and header information, while the body is handled separately. See MDN’s Using the Fetch API and the WHATWG Fetch Standard.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Why doesn’t fetch() reject on a 404?
A fulfilled fetch promise means the request produced a response; it does not mean the server reported success. HTTP statuses such as 404 Not Found or 504 Gateway Timeout are still responses, so check response.ok or response.status and decide how your application should handle them. response.ok indicates whether the status is in the successful range.
#1 Best Overall
const response = await fetch("/api/data");
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();The first await waits for the response. The second waits for the body to be read and parsed as JSON. This is why fetch() does not directly return the parsed value.
When does the fetch promise reject?
It rejects when the browser cannot provide a usable response, rather than simply because the server returned an error status. MDN lists malformed URLs and network errors among possible rejection causes. If code aborts the request through AbortController, the promise rejects with an AbortError. Handle these request failures separately from HTTP error responses; MDN documents the behavior in its Window: fetch() method reference.
Rank #2
What happens when JavaScript reads the response body?
After the fetch promise fulfills, the response body has not necessarily been consumed or parsed by application code. Call a body method such as response.json() or response.text() to read it. These methods return promises, so body reading—and, for json(), parsing—forms a later asynchronous step. A failure in that step is distinct from an HTTP status such as 404.
Recommended Free Tools
How can CORS change what JavaScript sees?
For cross-origin requests, the default mode is cors. A simple cross-origin request can be sent, but the browser withholds its response from JavaScript unless the server supplies a suitable Access-Control-Allow-Origin header. Some requests require a preflight check before the browser sends the actual request. The exact behavior depends on the request and the server’s CORS response; see MDN’s CORS guidance.
Setting mode: "no-cors" is not a way to read arbitrary cross-origin data. It produces an opaque response: JavaScript cannot access its headers or body.
Can a service worker answer the request?
Yes. A service worker can receive fetch events for explicit fetch() calls and other browser requests. Its handler may return a cached response, synthesize a response, or use the network. If the handler does not call respondWith(), the browser makes the original request. Consequently, the response JavaScript receives is not always a direct reply from the origin server. MDN explains this in its fetch event reference.
Quick Recap
Rank #4
How to interpret the outcome
- Promise fulfilled, successful status: A
Responseis available with a successful HTTP status; read its body if the application needs it. - Promise fulfilled, error status: A response exists, but the HTTP operation was unsuccessful. Check
okorstatusand handle it explicitly. - Promise rejected: No usable response was provided to the caller, for example because of a network failure, malformed URL, or abort.
- Opaque response: In
no-corsmode, JavaScript cannot inspect the response headers or body. - Worker-controlled response: A service worker may supply cached or synthesized content instead of relying on the network response.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors
