fetch 와 try.. catch 하기

오늘은 에러를 해결한건 아니지만
사이드 프로젝트를 하던 중 새로운 사실을 알게되어 적게 되었습니다.
(나만 새로운걸수도..)

fetch

fetch는 네트워크 통신을 위한 브라우저의 기본 내장 API이며 비동기 통신으로 서버와 데이터를 주고 받을 수 있다.

오늘의 주요 내용은 fetch의 error 핸들링이기 때문에
fetch에 대한 자세한 내용은 링크를 걸어놓겠습니다.
https://ko.javascript.info/fetch
출처 : 모던 JavaScript 튜토리얼

fetch + try..catch

나는 비동기 통신을 처음 배울 때 fetch를 사용하기 보다는
axios를 가장 먼저 접하게 됐다.

axios는 http 에러 코드가(상태 코드가 200-299 범위가 아닌 경우) 발생하면
자동으로 catch문이 실행돼어 에러처리를 할 수 있었다.

이번에 next js 사이드 프로젝트를 진행하면서 fetch API를 사용하게 되었는데,
400, 500번 에러가 발생해도 catch문으로 넘어가지 않고,
response.ok가 false일 경우를 처리하여 throw error를 던저야 했다.

아래는 프로젝트에서 실제로 사용하는 코드이다.

async function getPlans() {
  try {
    const headers = {
      "Content-Type": "application/json",
    };
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/post`,
      {
        method: "GET",
        headers,
        cache: "no-store",
      }
    );
    //: response.ok가 false일 경우 throw new Error
    if (!response.ok) {
      throw new Error("Failed to fetch plans.");
    }
    const json = await response.json();
    return { jsonData: json.data, accessToken: "null" };
  } catch (error) {
    console.log(error);
    return { jsonData: [], accessToken: "null" };
  }
}

fetch는 네트워크 요청이 성공적으로 완료되었을 때만 catch 블록으로 이동한다고 한다.
단순히 네트워크 요청이 서버에 도달해 응답을 받은 경우를 의미하고 HTTP 상태 코드가 200-299 범위에 있지 않더라도 요청 자체가 성공으로 간주되기 때문에 response.ok로 확인을 해야만 했다.

예를 들어, 서버가 404, 500 에러 코드를 반환해도 fetch는 이를 성공적인 요청으로 간주하며, 대신 이 경우 response.ok는 false가 반환되기 때문에 이를 이용하여 에러처리를 했다.