자바스크립트 fetch API는 비동기적으로 서버와 데이터를 주고받는 데 사용되는 간편한 방법입니다. 그러나 때로는 서버와의 통신 중에 오류가 발생할 수 있습니다. 이러한 오류를 처리하는 방법을 알고 있으면 애플리케이션의 안정성을 높일 수 있습니다.

fetch API 기본 사용법

fetch API를 사용하여 서버에 데이터를 요청할 때는 기본적으로 Promise를 반환합니다. 이 Promise는 서버로부터 응답을 받았을 때 처리하는 데이터를 포함합니다. fetch 함수에는 첫 번째 매개변수로 요청할 URL이 필요하며, 두 번째 매개변수로 요청 옵션 객체를 전달할 수 있습니다.

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    // 오류 처리 로직
  });

오류 처리 방법

fetch API는 HTTP 상태 코드가 200에서 299 사이일 때만 Promise를 이행합니다. 그 외의 상태 코드나 네트워크 오류는 Promise를 거부합니다. 이러한 오류를 처리하기 위해 catch 블록을 사용할 수 있습니다.

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('오류 발생');
    }
    return response.json();
  })
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    console.error(error);
    // 오류 처리 로직
  });

response.ok 속성을 사용하여 응답의 상태 코드가 200에서 299 사이인지 확인할 수 있습니다. 만약 상태 코드가 이 범위 밖에 있다면, throw new Error()를 사용하여 오류를 발생시킵니다.

네트워크 에러 처리

때로는 서버와의 통신에 네트워크 오류가 발생할 수 있습니다. 이러한 오류는 catch 블록에서 처리할 수 있습니다.

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('오류 발생');
    }
    return response.json();
  })
  .then(data => {
    // 데이터 처리 로직
  })
  .catch(error => {
    console.error(error);
    // 오류 처리 로직
  });

catch 블록에서 error 매개변수를 사용하여 오류 메시지를 콘솔에 출력하거나 오류 처리 로직을 수행할 수 있습니다.

결론

자바스크립트 fetch API를 사용하여 서버와 데이터를 주고받을 때 오류 처리를 적절히 하면 애플리케이션의 안정성을 향상시킬 수 있습니다. catch 블록을 사용하여 HTTP 상태 코드와 네트워크 오류에 대한 처리 로직을 작성해야 합니다. 이를 통해 사용자 경험을 개선하고 디버깅을 용이하게 할 수 있습니다.