axiosのエラーハンドリング

axios, TypeScript
2021-10-20

TL; DR:

import axios, { AxiosError } from 'axios';

try {
  await axios.get('...');
} catch(e) {
  if((e as AxiosError).isAxiosError && e.response) {
    // axiosのエラー
    throw new Error(e.response.data)
  } else {
    // 通常のエラー
    throw new Error(e)
  }
}

説明

axiosでエラー(レスポンスが5XX,4XX)が発生した場合、通常のErrorメッセージだと Request failed with status code 500 とかになり、axiosのライブラリ上で定義されているエラーメッセージが返る。

https://github.com/axios/axios/blob/v0.23.0/lib/core/settle.js#L18

try {
  await axios.get('...');
} catch(e) {
  console.log(e.message);  // Request failed with status code 500
}

xhrのレスポンスのbodyにエラーメッセージあり、これを取得したい場合、Errorオブジェクトは AxiosError のインスタンスとなり、その中にbodyのデータがあります。

手順としては

  1. ErrorのインスタンスがAxiosErrorかを判定します。
    1. AxiosErrorインスタンスには isAxiosError というプロパティがあり、それでAxiosErrorかそれ以外のErrorかを判定できる。(または axios.isAxiosError(e) でも同様の判定ができる)
  2. AxiosErrorだった場合、AxiosError.response.data にそのデータがあるので取得する
    1. 同様にhttp statusやheaderも取得することができる
try {
  await axios.get('...');
} catch(e) {
  if((e as AxiosError).isAxiosError && e.response) {
    console.log(e.response.data);  // error message from reponse body
  }
}

ベストプラクティスかどうかはわからないですが、ある程度はこれで判定できると思います。

Written by Kyohei Tsukuda who lives and works in Tokyo 🇯🇵 , building useful things 🔧.