javascript - Cum să prinzi eroarea atunci când faci o cerere fetch API?

Trimit cererea cu API-ul fetch și efectuez acțiunea în funcție de rezultatul dacă este corect sau include eroare.

codul meu de serviciu:

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

și codul meu then-catch care apelează pe cel de mai sus este:

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)});
 }

Chiar dacă răspunsul vine cu cod 500 Eroare Internă a Serverului, totuși acesta redirecționează către /mainpage și nu recunoaște eroarea. Cum pot să rezolv această problemă ?

Răspuns #1

Când o cerere fetch se întoarce cu un cod de eroare de la server, catch al promisiunii nu este executat, ci then. Catch este executat doar dacă există o eroare de rețea. Vezi documentația fetch:

Promisiunea returnată de fetch() nu va fi respinsă la starea de eroare HTTP chiar dacă răspunsul este un HTTP 404 sau 500. În schimb, aceasta se va rezolva normal (cu statusul ok setat la false) și va fi respinsă doar în caz de eșec de rețea sau dacă ceva a împiedicat finalizarea cererii.

Ceea ce trebuie să faci este, în interiorul then, să verifici response.ok. Dacă response.ok == false, atunci cererea a returnat o eroare. Poți găsi informații despre această eroare în response.status și response.statusText.

Răspuns #2

Dacă folosești async await, nu ar trebui să fie nevoie să înlănțuiești .then-uri ca și cum ai rezolva o promisiune.

Am ajustat codul tău și l-am încadrat într-un try/catch, eroarea try/catch va gestiona o eroare provenită dintr-un răspuns inexistent, totuși va trebui să verifici răspunsul serverului pentru erori în sine

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)
    }
}