자바스크립트 fetch API의 오류 처리 방법

10 Sep 2023

javascript

자바스크립트의 fetch API는 비동기 네트워크 요청을 보내고 응답을 처리하는 데 사용됩니다. 그러나 네트워크 요청이 실패하거나 서버에서 오류 응답을 반환하는 경우에는 올바른 방식으로 오류를 처리해야 합니다. 이 블로그 포스트에서는 자바스크립트 fetch API의 오류 처리 방법을 알아보겠습니다.

fetch API를 사용하여 네트워크 요청 보내기

fetch API는 기본적으로 Promise를 반환하는 fetch() 메서드를 제공합니다. 이 메서드를 사용하여 GET, POST 및 기타 HTTP 메서드로 네트워크 요청을 보낼 수 있습니다. 예를 들어, 다음은 GET 요청을 보내는 예제입니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 오류: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

응답 상태 확인하기

fetch() 메서드로 보낸 요청의 응답은 Response 객체로 반환됩니다. 이 객체에는 다양한 속성과 메서드가 있습니다. 응답의 상태 코드를 확인하려면 Response 객체의 status 속성을 사용할 수 있습니다. 일반적으로 HTTP 상태 코드 200은 성공, 그 외의 상태 코드는 오류를 의미합니다. 응답의 상태 코드를 확인한 후에는 필요에 따라 오류를 처리할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 오류: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

서버에서 반환된 오류 응답 처리하기

서버에서 오류 응답을 반환하는 경우, fetch() 메서드의 then() 메서드 안에서 이를 처리할 수 있습니다. 일반적인 방법 중 하나는 서버가 JSON 형식의 오류 메시지를 반환하는 경우 response.json() 메서드를 사용하여 오류 메시지를 가져온 다음, 해당 오류를 처리하는 것입니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      return response.json().then(error => {
        throw new Error('서버 오류: ' + JSON.stringify(error));
      });
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

네트워크 오류 처리하기

네트워크 요청이 실패한 경우에도 알맞은 오류 처리를 해야 합니다. 이 경우에는 예외를 던지는 대신, catch() 메서드에서 오류를 처리할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('네트워크 오류: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('오류:', error);
  });

응답 객체의 statusText 속성은 사용자가 읽을 수 있는 오류 메시지를 반환합니다.

결론

자바스크립트 fetch API를 사용하여 네트워크 요청을 보낼 때 오류 처리는 매우 중요합니다. 이 블로그 포스트에서는 fetch API의 오류 처리 방법을 소개했습니다. 응답 상태 코드를 확인하고, 서버에서 반환된 오류 응답과 네트워크 오류를 다루는 방법을 알아보았습니다. 알맞은 오류 처리를 통해 안정성과 사용자 경험을 향상시켜보세요.