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

1 min read読了の目安(約800字

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の時は以降のエラー処理を行わない、等に使用できる。