こんにちは、システム開発事業部の加藤です

axiosでの処理の共通化について、特定のAPIでは処理を共通化したくない場合があり、どう対応するか考えることがあったので共有します

axiosでの処理の共通化

axiosにはintercepterという機能があり、リクエストを送る前とレスポンスを受け取った後で、データを処理したり、特定のエラーハンドリングを登録することができます

各処理を共通化したい際に便利な機能です

1
2// レスポンスインターセプターの設定
3axios.interceptors.response.use(response => {
4  // レスポンスデータに対する処理
5  return response;
6}, error => {
7  // レスポンスエラーに対する処理
8  console.error('Error status:', error.response.status);
9  console.error('Error data:', error.response.data);
10  return Promise.reject(error);
11});
12

特定のAPIで共通のハンドリングを利用しない場合

一部のAPIでは共通化したハンドリングを通したくない場合です

例えば以下のようにエラー時にアラートを表示するような書き方をしていた場合、すべてのaxiosを使った呼び出しでアラートが表示されます

しかし、特定のapiではエラー時にモーダルを表示させたくない場合があるかもしれません

1axios.interceptors.response.use(response => {
2  return response;
3}, error => {
4  // エラーのアラートを表示
5  alert('エラー');
6  return Promise.reject(error);
7});

引数から渡した変数を、 インターセプターで条件分岐

axiosで引数を指定した場合、インターセプター内でconfig 変数から受け取れます

インターセプター内でconfigオブジェクトをチェックし、定義したプロパティに基づいて処理の実行を切り替えます

1axios.get('/some-endpoint', {
2  ignoreInterceptors: true  // intercepterを使わずに個別でエラーハンドリングを行いたい
3}).catch((error) => {
4  // 
5})

1axios.interceptors.response.use(response => {
2  return response;
3}, error => {
4  if (error.config.ignoreInterceptors) {
5	  return Promise.reject(error);
6  }
7  alert('エラー');
8  return Promise.reject(error);
9});
10

intercepterに書かずに、管理を外部で行う

エラーハンドリングをインターセプタではなく、外部で定義し、それをAPIのcatchで利用します

すべてのapiでハンドリングを書かないといけないので、対応が漏れてしまうかもしれません

1const handleError = (error) => {
2  alert('エラー');
3}
4
5axios.get('/some-endpoint').catch(handleError);
6
7
8// 共通化したエラーハンドリング関数を利用しない場合は個別に定義する
9axios.get('/some-endpoint').catch((e) => {
10	// 個別で実行したい何かしらの処理
11});

別のaxiosインスタンスを用意する

インターセプタを適用したくないリクエストのために、新しい Axios インスタンスを作成し、そのインスタンスにはインターセプタを設定しないようにします

1// インターセプタなしの axios インスタンス
2const axiosWithoutInterceptor = axios.create();
3
4axiosWithoutInterceptor.get('/some-endpoint');

まとめ

共通化していて、一部例外対応が必要な場合は、configに渡す方法が綺麗なのかなと思いました