자바스크립트는 웹 애플리케이션에서 서버와의 통신을 위해 널리 사용되는 프로그래밍 언어입니다. 서버에서 받은 응답은 상태 코드(status code) 라는 값으로 표시되며, 이를 처리하는 것은 중요한 작업입니다. 이번 글에서는 자바스크립트로 응답 상태 코드를 처리하는 방법에 대해 알아보겠습니다.

XMLHttpRequest 객체를 사용한 처리 방법

XMLHttpRequest 객체는 자바스크립트를 통해 서버와의 비동기 통신을 가능하게 해주는 객체입니다. 이를 이용하여 응답 상태 코드를 처리할 수 있습니다. 아래는 XMLHttpRequest 객체를 사용하여 응답 상태 코드를 처리하는 예제입니다.

var request = new XMLHttpRequest();
request.open('GET', '/api/data', true);

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // 성공적으로 응답 받았을 때 처리하는 코드
    } else {
      // 응답 상태 코드에 따라 처리하는 코드
    }
  }
};

request.send();

위의 예제에서 readyState는 요청의 상태를 나타내며, 4는 요청이 완료되었음을 의미합니다. status는 응답 상태 코드를 나타내며, 200은 성공적인 응답을 의미합니다. 이를 이용하여 응답 상태 코드에 따라 다른 동작을 수행할 수 있습니다.

fetch API를 사용한 처리 방법

fetch API는 ES6에서 추가된 네트워크 요청을 위한 API로, XMLHttpRequest보다 훨씬 간결하고 강력한 기능을 제공합니다. fetch API를 사용하여 응답 상태 코드를 처리하는 방법을 살펴보겠습니다.

fetch('/api/data')
  .then(function(response) {
    if (response.ok) {
      // 성공적으로 응답 받았을 때 처리하는 코드
    } else {
      // 응답 상태 코드에 따라 처리하는 코드
    }
  })
  .catch(function(error) {
    // 네트워크 오류 처리하는 코드
  });

위의 예제에서 response.ok는 응답이 성공적으로 받아졌는지를 나타내는 프로퍼티입니다. 성공적인 응답인 경우에는 true를 반환하며, 응답 상태 코드에 따라 다른 동작을 수행할 수 있습니다.

axios 라이브러리를 사용한 처리 방법

axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리로, 응답 상태 코드를 처리하기가 편리합니다. axios를 사용하여 응답 상태 코드를 처리하는 방법을 살펴보겠습니다.

axios.get('/api/data')
  .then(function(response) {
    // 성공적으로 응답 받았을 때 처리하는 코드
  })
  .catch(function(error) {
    if (error.response) {
      // 응답 상태 코드에 따라 처리하는 코드
    }
  });

axios를 사용하면 then 메소드로 성공적인 응답을 처리하고, catch 메소드를 통해 응답 상태 코드에 따른 오류를 처리할 수 있습니다.

마무리

자바스크립트를 사용하여 웹 애플리케이션에서 서버와의 통신을 처리할 때, 응답 상태 코드를 제대로 처리하는 것은 매우 중요합니다. 이번 글에서는 XMLHttpRequest 객체, fetch API, 그리고 axios 라이브러리를 사용하여 응답 상태 코드를 처리하는 방법을 알아보았습니다. 이를 통해 더 안정적이고 신뢰할 수 있는 웹 애플리케이션을 개발할 수 있을 것입니다.