fetch resolves even if 404?

by

A fetch() call is only rejected if the network request itself fails for some reason (host not found, no connection, server not responding, etc…).

Any result back from the server (404, 500, etc…) is considered a successful request from the promise point of view. Conceptually, you made a request from the server and the server answered you so from the networking point of view, the request finished successfully.

You need to then test that successful response to see if has the type of answer you wanted. If you want a 404 to be a rejection, you could code that yourself:

fetch('notExists').then(function(response) {
    if (!response.ok) {
        // make the promise be rejected if we didn't get a 2xx response
        const err = new Error("Not 2xx response");
        err.response = response;
        throw err;
    } else {
         // got the desired response
    }
}).catch(function(err) {
    // some error here
});

You could even make your own myFetch() that just does this automatically for you (converts any non-200 response status to a rejection).

What is the reason behind a resolved promise for a a completely bad
request ( non existing resource / server down).

First off, server down will not generate a successful response – that will reject.

A successful response is generated if you successfully connect to the server, send it a request and it returns a response (any response). As for “why” the designers of the fetch() interface decided to base the rejection on this, it’s a bit hard to say without talking to someone who was actually involved in the design of that interface, but it seems logical to me. This way the rejection tells you whether the request got through and got a valid response. It’s up to your code to decide what to do with the response. You can, of course, create your own wrapper function that modifies that default behavior.

More Related Contents:

  1. Why does .json() return a promise?
  2. How can I fetch an array of URLs with Promise.all?
  3. fetch: Reject promise with JSON error object
  4. using a fetch inside another fetch in javascript
  5. How to handle HTTP code 4xx responses in fetch api
  6. How do I convert an existing callback API to promises?
  7. Fetch: POST JSON data
  8. Use async await with Array.map
  9. How to turn this callback into a promise using async/await?
  10. Promise – is it possible to force cancel a promise
  11. return value after a promise [duplicate]
  12. Why can I not throw inside a Promise.catch handler?
  13. JavaScript, make a POST with JSON data with fetch()
  14. Promise constructor with reject call vs throwing error
  15. Using promise function inside Javascript Array map
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. How do I wait for a promise to finish before returning the variable of a function?
  18. Chrome – Fetch API cannot load file. How to workaround?
  19. Debounce function implemented with promises
  20. How to promisify Node’s child_process.exec and child_process.execFile functions with Bluebird?
  21. When does async function actually return a pending promise?
  22. Async Await map not awaiting async function to complete inside map function before mapping next item
  23. Returning an Axios Promise from function
  24. what happens when a Promise never resolves? [duplicate]
  25. Is it possible to use axios.all with a then() for each promise?
  26. Memoization of promise-based function
  27. Why is try {} .. catch() not working with async/await function?
  28. FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API
  29. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend
  30. Weird behavior with Promise throwing “Unhandled promise rejection” error

Leave a Comment