[javascript] Axios를 이용한 상태 코드 및 에러 처리 방법

소개

Axios는 JavaScript로 작성된 HTTP 클라이언트 라이브러리로, 웹 브라우저 및 Node.js에서 사용할 수 있습니다. Axios는 간편한 API 호출과 함께 상태 코드 및 에러 처리를 효과적으로 수행할 수 있는 기능을 제공합니다.

상태 코드 확인하기

Axios를 사용하면 서버로부터 받은 HTTP 응답의 상태 코드를 확인할 수 있습니다. 예를 들어, 다음과 같이 status 속성을 통해 상태 코드를 확인할 수 있습니다:

axios.get('https://api.example.com/posts/1')
  .then(function (response) {
    console.log(response.status); // 상태 코드 출력
  })
  .catch(function (error) {
    console.log(error);
  });

위의 예제에서 response.status를 통해 서버의 응답 상태 코드를 확인할 수 있습니다.

에러 처리하기

Axios를 통해 발생하는 에러를 적절히 처리하려면 .catch() 블록에서 에러를 처리할 수 있습니다. 예를 들어, 다음과 같이 에러를 처리할 수 있습니다:

axios.get('https://api.example.com/posts/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data); // 서버 응답에 포함된 에러 데이터 출력
      console.log(error.response.status); // 서버 응답 상태 코드 출력
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

위의 예제에서 .catch() 블록은 서버 응답에 대한 에러 처리를 수행합니다. error.response.data를 통해 서버 응답에 포함된 에러 데이터를 확인할 수 있으며, error.response.status를 통해 응답 상태 코드를 확인할 수 있습니다.

결론

Axios는 HTTP 요청을 보내고 받는 작업을 쉽게 수행할 수 있는 라이브러리입니다. 상태 코드를 확인하고 에러를 처리하는 방법을 알고 있다면, 더욱 효율적으로 서버와의 통신을 관리할 수 있습니다.

참고 자료