데이터를 가져올 때try...캣치를 안 하는 이유.

'데이터를 가져올 때try... catch' 는 다음과 같은 내용을 가리킨다.

try {
  const data = await fetchSomething();
  // 正常系レスポンスの処理
} catch (err) {
  if (isAxiosError(err)) {
    // 異常系レスポンスの処理
  }
}

동기는 세 가지다.

데이터를 선언적으로 쓰고 싶어서

데이터 획득과 무관한 예외도catch

발생하기 때문에

HttpError에 대한 통계가 불편하다

왜냐하면 선언적으로 데이터를 써서 얻고 싶어요.

어쨌든 데이터를 얻을 때 항상 이렇게 쓰려고 한다.usesWR·useQuery와 apol/client에 익숙한 인터페이스입니다.

const { data, err, status } = await fetchSomething();
if (data) // 正常系レスポンスの処理
if (err) // 異常系レスポンスの処理

유형 정의로 응답을 표시하면 이렇게 됩니다.

type HttpResponse<T, K> = {
  data?: T;
  err?: K;
  status: number;
};

데이터 얻기와 무관한 예외도catch

eslintno-unused-expressions에서 바로 다음과 같은 오류가 발생하지만any가 꽉 잡은 중간 코드를 가지고 있다면catch의 가능성을 지울 수 없습니다.

try {
  const data = await fetchSomething();
  // 参照ミスなどで例外がthrowされる
  a.b.c;
} catch (err) {
  if (isFetchError(err)) {
    // 異常系レスポンスの処理
  }
  // ReferenceError　でここに着地する
}

이렇게 데이터를 얻는 것과 무관한 예외로 캣츠 문장을 병렬 처리하면캣츠 문장의 비대화와 잘못된 파악을 초래할 수 있다.HttpError는 개발자에게 구상 범위 내에 있기 때문에 데이터 취득 함수 내부에서 성형, 접기를 하고 싶습니다.

HttpError에 대한 통계가 불편해요.

이유가 이게 제일 커요.모든 데이터 획득 함수HttpResponse의 응답이 확인되면

type HttpResponse<T, K> = {
  data?: T;
  err?: K;
  status: number;
};

Promise.all 이후의 처리는 매우 수월해진다.

const res: HttpResponse<T, K>[] = await Promise.all(
  fetchDataA(),
  fetchDataB(),
  fetchDataC(),
  fetchDataD()
);

모든 데이터를 성공적으로 획득한 경우 어떻게 할 것인가

일부 데이터 취득에 실패한 경우 어떻게 하죠

status 코드와 오류를 종합하여 어떻게 2차 처리를 하는가

List형에 해당하는 응답이므로 배열 함수를 사용하여 처리할 수 있습니다.여러 데이터를 병렬로 처리하여 더 많은 BFF API Aggregation을 얻을 수 있습니다.

설치 방법 및 CodeSandbox 샘플

이 응답을 얻기 위해서는 프로그램 라이브러리를 추가할 필요가 없습니다.평소 사용하던 REST API 클라이언트를 조금만 처리하면 충분합니다.예를 들어 Native fetch를 사용할 때 then에 연결된 함수로 처리합니다.res.ok 판단에 따라 접어서HttpData(정상 시스템)과HttpError(이상 시스템)로 한다.

const url = `https://hacker-news.firebaseio.com/v0/newstories.json`;

// Before
fetch(url).then((res) => res.json());

// After
fetch(url).then((res) => {
  const { status, ok } = res;
  return res.json().then((d) => {
    if (ok) {
      // HttpData型（正常系）に畳み込む
      const res: HttpData = { data: d, status };
      return res;
    }
    // HttpError型（異常系）に畳み込む
    const res: HttpError = { err: d, status };
    return res;
  });
});

추기

Native fetch에서 네트워크 오류 시 Reject에 의해 처리되었기 때문에try를 처리하기 위해서...제목을 뒤집어서 죄송합니다.그리고 200번 테이블 이외의 곳을 프로젝트로 삼는 게 어때요?라는 취지로 쓴 기사, 프로미스.all의 사용 상황에 따라 Reject 400500호대가 비교적 편리할 수 있으니 양해해 주십시오.