[JavaScript] fetch() API와 Axios의 에러 처리 방법 비교

fetch() API와 Axios의 에러 처리 방법 비교

들어가며

• FetchAPI와 Axios의 에러 처리 방법의 차이에 대해 간단하게 정리해본다.

 

오류 처리 방법 비교

fetch() API

• 기본적으로 네트워크 요청이 성공적으로 완료되었는지를 상태 코드(Status Code)가 아닌, 네트워크 오류 여부로 판단한다.
• 즉, 네트워크 연결이 제대로 되어 서버에 요청이 전달되고, 서버로부터 응답이 왔다면, 그 응답이 200번대(성공) 상태 코드인지, 400번대(클라이언트 오류) 또는 500번대(서버 오류) 상태 코드인지와 상관없이 요청이 '성공적으로' 완료된 것으로 간주한다.
  • 이 경우 @fetch()@는 프로미스(Promise)를 성공 상태로 반환하며, 응답 객체를 @resolve@한다.
• 이 때문에 4xx 또는 5xx와 같은 오류 상태 코드가 반환된 경우에도 @fetch()@는 @reject@되지 않고, 여전히 성공적인 요청으로 간주된다.
• 따라서 상태 코드에 따라 오류를 처리하고 싶다면, 응답 객체의 @ok@ 속성(상태 코드가 200-299 범위에 있을 때 @true@)이나 상태 코드 자체를 확인해야 한다.

fetch('https://example.com/api')
  .then(response => {
  
    // 오류 처리 여부 확인
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

 

개발자 도구를 통해 응답 받은 객체를 확인해보면, ok 프로퍼티를 확인할 수 있다.

 

Axios

• 기본적으로 200번대가 아닌 HTTP 상태 코드를 오류로 간주한다.
  • 즉, 4xx나 5xx 상태 코드가 반환되면 Axios는 해당 요청을 실패한 것으로 처리하고, Promise를 @reject@한다.

axios.get('https://example.com/api')
  .then(response => console.log(response.data))
  .catch(error => {
    console.error('Error:', error.response.status);
  });

 

정리

fetch() API

• 네트워크 요청이 성공적으로 완료되면(응답을 받으면) 상태 코드와 상관없이 성공으로 처리된다.
• 오류 상태 코드(4xx, 5xx 등)에 대해 직접 확인하고 처리해야 한다.

 

Axios

• 200번대가 아닌 상태 코드를 반환하면 오류로 간주하고, 자동으로 Promise를 @reject@한다.

 

참고 사이트

Fetch API 사용하기 - Web API | MDN

에러 핸들링 | Axios Docs