JavaScript에서 AJAX 오류 완전히 가로채기

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