How to distinguish network errors from a deliberate break?

user_903011 0
Viewed 23

Consider the code below that is supposed to do something when the reply from a web endpoint is "200-ish" (2xx and similar) and something else when the reply is 404 (and yet something else for non-404, and manage network issues)

fetch('https://httpstat.us/404')
  .then((r) => {
    if (r.ok) {
      console.log(`response 200-ish`)
      return r // go to the next .then()
    } else {
      console.log(`response is not 200-ish`)
      return Promise.reject(r.status) // the chain for then() breaks here
    }
  })
  .then((r) => {
    console.log('do stuff for 200-ish')
  })
  .catch((err) => {
    if (err === 404) {
      console.log('do 404 stuff')
    } else {
      console.log('do stuff because of another response from the API')
    }
    // how to address network problems??
  })

  • if I fetch https://httpstat.us/200 the code is OK
  • if I fetch https://httpstat.us/404 the code is OK
  • if I fetch https://httpstat.us/500 (= neither 200 nor 404, but a correct reply from the API server), the code is OK by chance
  • if I fetch https://httpstat.usXXXXXXXX/500 (= an incorrect URL, generating a network error), the code is not OK

In other words the last else catches anything not explicitly checked for.

How can I differentiate between an explicit break from the promise chain (exposing a return code) and network errors?

fetch-api javascript
1 Answers

You will need a slighly complex chain of promises:

let fetchPromise = fetch('https://httpstat.us/404');
fetchPromise.catch((e) => {
       // Do stuff only for network errors
  });
fetchPromise.then((r) => {
    if (r.ok) {
      return r.json().then(
          /* The JSON here is just a example if you need to wrap more promises */

          /* Do something with a 200 */
      )
    } else {
          /* Do something with non-200 ish */
    }
  })

Alternatively:

try:
    let response = await fetch('...');
catch (ex) {
    /* do something with network errors */
}

if (!response.ok) {
    /* do something with non-network errors */
    throw new Error()
}

/* do something with 200 */
user_63334440
Related