🙉
axios で共通エラーハンドリングを行う方法
interceptors
Nuxt.jsを利用していてaxiosの共通エラーハンドリングを行いたい。
axios.interceptorsを使用することで共通処理が書ける。
axiosを複数箇所で利用し、共通でエラーハンドリングを行うのには最適。
AxiosFactory.ts
axios.interceptors.response.use(
response => response,
async error => {
switch (error.response?.status) {
case 400:
case 401:
// ステータスコードに応じてエラー処理を実装
break;
default:
console.log();
}
});
axiosで内部エラーハンドリングをキャンセルする
axios.interceptors.error
の中でreturn false
で記載することで以降のエラーハンドリング処理をキャンセルすることができる。
下記のissueを参考にした。
axios.interceptors.response.use(
response => response,
async error => {
switch (error.response?.status) {
case 404:
return false;
}
});
ステータスコードが404の時は以降のエラー処理を行わない、等に使用できる。
Discussion