How to catch the error when making fetch api request?

Question

I am sending request with fetch api and make action according to the result is correct or it includes error.

my service code:

LoginUser(user: User) {
    return fetch("http://localhost:8080/login", {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify(user)
    });
  }

and my then-catch code which calls the above one is:

async loginUser() {
  let response = await this._service.LoginUser(this.user)
  .then(response => {return response.json()})
  .then(response => {this._router.navigate(['/mainpage'])})
  .catch(error => {alert(error)});
 }

Whether the response is coming with code 500 Internal Server Error still it is redirecting to /mainpage and does not recognise the error. How can I fix this problem ?

Is there a specific reason why you would use fetch instead of the Angular Http client? — MikeOne, Jul 26 '20 at 16:54
the "boss" wanted me to use only fetch api, not jquery or others etc. — Chris Garsonn, Jul 26 '20 at 16:57
Is this not an Angular app..? It has a very good http client build in..? — MikeOne, Jul 26 '20 at 16:59
Yes bro i know :(, but when the boss wants it, thats it unfortunately. — Chris Garsonn, Jul 26 '20 at 17:04
Does this answer your question? [Fetch: reject promise and catch the error if status is not OK?](https://stackoverflow.com/questions/38235715/fetch-reject-promise-and-catch-the-error-if-status-is-not-ok) — jonrsharpe, Jul 26 '20 at 17:06
Why would you even mention jQuery? Use Angular. It's supposed to be an Angular project, isn't it? — mbojko, Jul 26 '20 at 17:19

score 10 · Answer 1 · answered Jul 26 '20 at 16:51

When a fetch request comes back with an error code from the server, the catch of the promise is not executed, the then is. The catch is only executed if there is a network failure. See the fetch docs:

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

What you need to do is, inside your then, check response.ok. If response.ok == false, then the request returned an error. You can find info about this error in response.status and response.statusText.

score 2 · Accepted Answer · answered Jul 26 '20 at 16:55

If you are using async await you shouldnt have to chain on .thens like you are resolving a promise.

I adjusted your code and wrapped it in a try/catch, the try/catch error will handle an error from a non response however you will need to check your server response for errors itself

async loginUser() {

    try {
        let response = await this._service.LoginUser(this.user)

        // Check your response for error this may not be response.error
        if (response.error) {
            // Handle error
            alert(error)
        } else {
            // Navigate on success
            this._router.navigate(['/mainpage'])
        }
    } catch (err) {
        alert(err)
    }
}

How to catch the error when making fetch api request?

2 Answers2