🙉

axios で共通エラーハンドリングを行う方法

2021/04/17に公開

interceptors

Nuxt.jsを利用していてaxiosの共通エラーハンドリングを行いたい。
axios.interceptorsを使用することで共通処理が書ける。
https://github.com/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を参考にした。
https://github.com/axios/axios/issues/583

axios.interceptors.response.use(
        response => response,
        async error => {
	  switch (error.response?.status) {
	   case 404:
	    return false;
	}
      });

ステータスコードが404の時は以降のエラー処理を行わない、等に使用できる。

Discussion