Teljes AJAX hibakezelés JavaScriptben

A fetch által visszaadott Promise csak akkor végződik hibával, ha hálózati hiba történt. Ha viszont a szerver 404 vagy 500 állapotkóddal válaszol, a Promise sikeresen lefut, de az ok állapot false értékre lesz állítva.

Fogjuk meg mindkét típusú hibát:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        console.log('hibás válasz állapotkód');
        return '';
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});

Tegyük úgy, hogy a HTTP válasz hibás állapotkódjával kapcsolatos hiba is el legyen kapva a catch blokk által. Ehgy dobjuk tovább a hibát a throw segítségével:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error('hibás válasz állapotkód');
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});