Interceptação Completa de Erros AJAX em JavaScript

A Promise retornada por fetch é rejeitada apenas se ocorrer um erro de rede. Se o servidor retornar uma resposta com status 404 ou 500, a Promise será cumprida (resolvida), mas o status ok será definido como false.

Vamos interceptar ambos os tipos de erro:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        console.log('status de resposta ruim');
        return '';
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});

Vamos fazer com que o erro relacionado ao status HTTP ruim também seja capturado pelo bloco catch. Para isso, vamos propagá-lo (rejeitar) usando throw:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error('status de resposta ruim');
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});