자바스크립트 응답 상태 코드 처리

10 Sep 2023

javascript

웹 애플리케이션을 개발하다보면 서버로부터 반환되는 응답 상태 코드를 처리해야 할 때가 많습니다. 이러한 상태 코드는 서버와의 통신 결과를 나타내며, 우리가 적절한 대응을 할 수 있도록 도와줍니다. 자바스크립트에서는 이러한 응답 상태 코드를 처리하는 방법을 제공합니다.

XMLHttpRequest를 이용한 응답 상태 코드 처리

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 성공적인 응답 처리
      console.log('데이터를 성공적으로 받아왔습니다.');
    } else {
      // 에러 응답 처리
      console.error('데이터를 받아오는 중에 오류가 발생했습니다.');
    }
  }
};
xhr.send();

위의 예시 코드에서는 XMLHttpRequest를 이용하여 서버로 데이터를 요청하고, 응답 상태 코드를 처리합니다. readyState가 4일 경우 응답을 받았으며, 이때 status를 확인하여 성공 혹은 실패를 판단할 수 있습니다.

Fetch API를 이용한 응답 상태 코드 처리

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      // 성공적인 응답 처리
      console.log('데이터를 성공적으로 받아왔습니다.');
    } else {
      // 에러 응답 처리
      console.error('데이터를 받아오는 중에 오류가 발생했습니다.');
    }
  })
  .catch(error => {
    // 네트워크 오류 처리
    console.error('데이터를 받아오는 중에 네트워크 오류가 발생했습니다.');
  });

Fetch API를 이용하면 더 간단하게 응답 상태 코드를 처리할 수 있습니다. response.ok 속성을 확인하여 응답이 성공인지 아닌지를 판단하고, 그에 맞는 대응을 할 수 있습니다. 또한, 네트워크 오류가 발생하면 catch 블록에서 처리할 수 있습니다.

axios 라이브러리를 이용한 응답 상태 코드 처리

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('데이터를 성공적으로 받아왔습니다.');
  })
  .catch(error => {
    console.error('데이터를 받아오는 중에 오류가 발생했습니다.');
  });

axios라이브러리를 사용하면 더욱 간결하게 응답 상태 코드를 처리할 수 있습니다. then 블록에서 성공적인 응답을 처리하고, catch 블록에서 에러 응답을 처리할 수 있습니다.

위의 예시 코드들은 응답 상태 코드 처리를 간단하게 보여주기 위한 것이며, 실제로는 다양한 상황에 따라 좀 더 복잡한 처리가 필요할 수 있습니다. 하지만 이러한 기본적인 처리 방법을 숙지하고 있다면 서버로부터 반환되는 응답 상태 코드를 적절히 대응할 수 있을 것입니다.