QJavaScript · Interview preparation
Why does fetch not reject for HTTP 404 or 500?
The fetch Promise typically fulfills when an HTTP response arrives, even if the server returned an error status.
The idea to remember.
The fetch Promise typically fulfills when an HTTP response arrives, even if the server returned an error status. Check response.ok or response.status and explicitly handle error bodies.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: promise resolution
01 / BEGINNERPromise callbacks run after synchronous code.
console.log('A');
Promise.resolve().then(() => console.log('C'));
console.log('B'); // A, B, CIntermediate: await and errors
02 / INTERMEDIATEHandle unsuccessful HTTP responses as well as rejected requests.
async function loadUser(id) {
const response = await fetch('/api/users/' + id);
if (!response.ok) throw new Error('Unable to load user');
return response.json();
}Real scenario: parallel independent calls
03 / REAL SCENARIOPromise.all starts independent calls together and handles failures.
async function loadDashboard() {
const [account, activity] = await Promise.all([
fetch('/api/account').then(r => { if (!r.ok) throw Error('Account'); return r.json(); }),
fetch('/api/activity').then(r => { if (!r.ok) throw Error('Activity'); return r.json(); })
]);
return { account, activity };
}02Check your understanding
Try it in your own words.
Explain why does fetch not reject for HTTP 404 or 500 without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse JavaScript study guides ↗