【React+TypeScript】axiosを使用した非同期処理のステータスコードで処理を分岐する

#背景
axiosの使用した非同期処理において、ステータスコードで処理を分岐する実装をしたのでまとめておく

#実装

sample.tsx（メインモジュール）

import { FC, useState, useEffect } from 'react';
import { callGetInfo } from 'services/api';  // WebAPIモジュール

const MainComponent: FC = () => {
  const [info, setInfo] = useState();


  useEffect(() => {
    try {
      const mainProcess = async () => {
        const rtnData = await callGetInfo();

        // ステータスコードで分岐する
        if (rtnData.status === 200) {
          // 正常値が返却された時に行なう処理
          setInfo(rtnData.datas);
        } else if (rtnData.status === 404) {
          // 404エラーの時に行なう処理
        } else if (rtnData.status === 500) {
          // 500エラーの時に行なう処理
        }
      };
      void mainProcess();

    } catch (error) {
      if (error instanceof Error) {
        // エラー処理
      } else if (typeof error === 'string') {
        // エラー処理
      }
    }
  }, []);

}

services/api.ts（WebAPI処理モジュール）

import axios from 'axios';
import { Interface1 } from 'interfaces';

export const callGetInfo = async (): Promise<{
  datas: Interface1[];
  status: number;
}> => {
  let status = 0;
  const results = await axios
    .get<
      {
        data1: string;
        data2: string;
        data3: string;
        data4: string;
      }[]
    >(URL);

  status = results.status;

  const datas = results.data.map((result) => {
    const data: Interface1 = { 
      data1: result.data1,
      data2: result.data2,
      data3: result.data3,
      data4: result.data4,
      data5: result.data5,
    };

    return data;
  });

  return { datas, status };
};

interfaces/index.ts（インタフェース用モジュール）

export type Interface1 = {
  data1: string;
  data2: string;
  data3: string;
  data4: string;
  data5: string;
};

#まとめ

• 「rtnData.status === 200」のように記述することで、ステータスコードで処理を分岐することができる