Axios는 자바스크립트에서 널리 사용되는 Promise 기반 HTTP 클라이언트 라이브러리입니다. HTTP 요청을 보내고 응답을 받을 때 오류가 발생할 수 있습니다. 오류 처리는 애플리케이션의 안정성과 에러 디버깅에 중요한 역할을 합니다. 이번 글에서는 Axios를 사용하여 오류 처리하는 방법에 대해 알아보겠습니다.

1. try-catch 문으로 오류 처리하기

Axios는 기본적으로 HTTP 상태 코드가 200 외의 모든 응답을 오류로 간주합니다. 따라서 try-catch 문을 사용하여 요청을 보내고 응답을 받을 때 오류를 처리할 수 있습니다.

try {
  const response = await axios.get('https://api.example.com');
  console.log(response.data);
} catch (error) {
  console.error(error);
}

위의 예시에서 axios.get() 메소드를 사용하여 GET 요청을 보내고, 성공적으로 응답을 받았을 경우 응답 데이터를 출력합니다. 그러나 오류가 발생한 경우 catch 블록이 실행되고 오류 정보를 출력합니다.

2. 오류 처리하기 위한 응답 객체

Axios는 오류 응답과 성공 응답 간의 구조를 일관성 있게 유지하기 위해 특정한 형태의 응답 객체를 반환합니다. 오류 응답은 response 객체의 status와 data 속성을 통해 접근할 수 있습니다.

try {
  const response = await axios.get('https://api.example.com');
  console.log(response.data);
} catch (error) {
  console.error(error.response.status);
  console.error(error.response.data);
}

위의 예시에서 error.response.status와 error.response.data를 사용하여 오류 응답의 상태 코드와 데이터에 접근할 수 있습니다.

3. 오류 처리 함수 사용하기

때로는 여러 곳에서 Axios 요청을 보내고 같은 방식으로 오류 처리를 해야하는 경우가 있습니다. 이 때 Axios 인스턴스를 생성하고 오류 처리 함수를 정의하여 코드의 재사용성을 높일 수 있습니다.

const instance = axios.create({
  baseURL: 'https://api.example.com',
});

instance.interceptors.response.use(
  response => response,
  error => {
    console.error(error.response.status);
    console.error(error.response.data);
    return Promise.reject(error);
  }
);

instance.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

위의 예시에서 axios.create() 메소드를 사용하여 Axios 인스턴스를 생성하고, instance.interceptors.response.use() 메소드를 사용하여 응답에 대한 오류 처리를 정의합니다. 이후 인스턴스를 통해 GET 요청을 보내고 응답이 성공하면 데이터를 출력하며, 오류가 발생하면 오류 정보를 출력합니다.

Axios를 사용하여 오류 처리하는 방법에 대해 알아보았습니다. 오류 처리는 애플리케이션의 안정성과 에러 디버깅에 중요한 역할을 수행하기 때문에 신중하게 처리해야합니다. 더 자세한 내용은 Axios 공식 문서를 참조하시기 바랍니다.

#axios #오류처리