Полный перехват AJAX ошибок в JavaScript

Промис, который возвращает fetch, завершается с ошибкой, только если произошла ошибка сети. Если же сервер вернул ответ со статусом 404 или 500, то промис будет завершен успешно, но при этом статус ok будет установлен в false.

Давайте перехватим оба типа ошибок:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        console.log('плохой статус ответа');
        return '';
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});

Сделаем так, чтобы ошибка, связанная с плохим статусом HTTP ответа, также ловилась блоком catch. Для этого прокинем ее дальше через throw:

javascriptbutton.addEventListener('click', function() {
  let promise = fetch('/ajax.html')
  .then(
    response => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error('плохой статус ответа');
      }
    },
  ).then(
    text => {
      console.log(text);
    }
  ).catch(
    error => {
      console.log(error);
    }
  );
});