Axiosのエラーハンドリング等の共通処理はInterceptersに集約しよう

Interceptersとは？

axiosでリクエストを送信する前に毎回行いたい処理、レスポンスを受け取った後に毎回行いたい処理を定義することができます。上手く活用すれば、「レスポンスのステータスコードが200系以外の場合にトースト表示する」のような処理をaxiosの呼び出し毎に定義することなく、Interceptersに集約することができます。

参考：公式ドキュメント

実装例

axiosClient.js

import axios from 'axios';

export const axiosClient = axios.create({
    // 必要に応じてconfigを設定
});

// リクエスト送信前に行いたい処理の定義
axiosClient.interceptors.request.use(req => {
    // リクエスト送信前に行いたい処理
    return req;
  }, err => {
    // リクエスト失敗時(ネットワークエラー等)に行いたい処理
    return Promise.reject(err);
});

// レスポンス受信後に行いたい処理の定義
axiosClient.interceptors.response.use(res => {
    // ステータスコードが200系以外の場合に実行する処理
    return res;
  }, err => {
    // ステータスコードが200系以外の場合に実行する処理
    return Promise.reject(err);
});

補足

interceptors.request.use : リクエスト送信前に行いたい処理の定義
第一関数に渡される引数(実装例のreq)には、リクエストの詳細(URL、HTTP メソッド、ヘッダー、パラメータ等)が含まれ、この関数の戻り値となるオブジェクトが最終的に実行されるリクエストとなります。
第二関数に渡される引数(実装例のerr)には、リクエスト失敗の原因に関する情報が含まれます。

interceptors.response.use : レスポンスの受信後に行いたい処理の定義
第一関数に渡される引数(実装例のres)には、レスポンスの詳細(ステータスコード、ヘッダー、データ等)が含まれ、この関数の戻り値がそのまま呼び出し元に返却されます。
第二関数に渡される引数(実装例のerr)には、レスポンスエラーの原因に関する情報が含まれます。

活用例

Interceptersがどのようなケースで活用されているかを調べてみました。

リクエスト送信前(interceptors.request.use)

• リクエストヘッダーにアクセストークンを設定
• ローディングの表示(interceptors.response.useと連動)

レスポンス受信後(interceptors.response.use)

• 401エラーによるログインページへのリダイレクト
• 404エラーによるNot Foundページへのリダイレクト
• エラーメッセージやトーストの表示
• 監視ツール等への通知