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のデータがあります。
手順としては
isAxiosError
というプロパティがあり、それでAxiosErrorかそれ以外のErrorかを判定できる。(または axios.isAxiosError(e)
でも同様の判定ができる)AxiosError.response.data
にそのデータがあるので取得するtry {
await axios.get('...');
} catch(e) {
if((e as AxiosError).isAxiosError && e.response) {
console.log(e.response.data); // error message from reponse body
}
}
ベストプラクティスかどうかはわからないですが、ある程度はこれで判定できると思います。