【Axios】try~catch(error)のerrorがEslintエラーになる対処法【React(TypeScript)】

2024-01-26

try {
  // HTTPリクエストの実行
  const response = await axios.get('https://example.com/api/data');
  console.log(response.data);
} catch (error) {
  // エラーハンドリング
  const { status, data } = error.response as { status: number; data: string };
  console.error({ status });
  console.error('response message: ', data);
  console.error('This is an error:', error.message);
}

この場合errorはunknown型となりEslintエラーが出る場合があります。
error.responseはany型となりEslintエラーが出ます。

axiosを使用してエラーオブジェクトを扱う際に、isAxiosErrorメソッドが役立ちます。
このメソッドは、エラーオブジェクトがaxiosのものであるかどうかを確認するために使用されます。

なぜ`isAxiosError`が必要なのか？

axiosはPromiseを基盤としているため、通常のエラーオブジェクトとは異なる形式を持っています。isAxiosErrorメソッドは、エラーオブジェクトがaxiosのものであるかどうかを確認し、適切に処理するのに役立ちます。

使い方

isAxiosErrorメソッドはaxiosからエクスポートされており、以下のように使用します：

try {
  // HTTPリクエストの実行
  const response = await axios.get('https://example.com/api/data');
  console.log(response.data);
} catch (error) {
  // エラーハンドリング
  if (isAxiosError(error)) {
    // axiosのエラーである場合の処理
    const { status, data } = error.response as { status: number; data: string };
    console.error({ status });
    console.error('response message: ', data);
    console.error('This is an axios error:', error.message);
  } else {
    // 通常のエラー処理
    console.error('This is a general error:', error.message);
  }
}

このようにif文を使用してエラーオブジェクトがaxiosのものと切り分けて分岐で処理を記述しわける事ができます。