[解決済み] axiosのインターセプターはどのように使用するのですか？

質問

axiosのドキュメントを見ましたが、以下のことしか書かれていません。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

また、多くのチュートリアルはこのコードしか示していませんが、私はそれが何のために使用されているのか混乱しています、誰かが私に従うために簡単な例を与えることができます。

どのように解決するのですか？

簡単に説明すると、すべてのHTTPアクションに対するチェックポイントのようなものです。行われたすべてのAPIコールは、このインターセプターを通されます。

では、なぜ2つのインターセプターがあるのでしょうか？

APIコールは、リクエストとレスポンスの2つで構成されています。チェックポイントのように振る舞うので、リクエストとレスポンスは別々のインターセプターを持っています。

リクエストインターセプターの使用例をいくつか紹介します。

リクエストを行う前に、あなたの認証情報が有効かどうかを確認したいとします。そこで、実際にAPIコールをする代わりに、インターセプターレベルでクレデンシャルが有効かどうかをチェックすることができます。

すべてのリクエストにトークンをアタッチする必要があるとします。Axiosのコールごとにトークン追加ロジックを重複させるのではなく、リクエストされるごとにトークンをアタッチするインターセプターを作ることができます。

レスポンスインターセプターの使用例をいくつかご紹介します。

レスポンスを取得し、APIのレスポンスから判断して、ユーザーがログインしていることを推論したいとします。そこで、レスポンスインターセプターの中で、ユーザーのログイン状態を扱うクラスを初期化し、受け取ったレスポンスオブジェクトに応じてそれを更新することができます。

有効なAPI認証情報を使ってあるAPIをリクエストしたが、データにアクセスするための有効なロールを持っていないと仮定する。そこで、レスポンスインターセプターから「そのユーザーは許可されていない」というアラートを出すことができます。こうすれば、Axiosのリクエストごとに行わなければならない不正なAPIエラー処理から解放されます。

以下はコード例です。

リクエストインターセプター

• することで（必要であれば）axiosの設定オブジェクトを出力することができます（この場合、環境変数を確認することで）。

  const DEBUG = process.env.NODE_ENV === "development";
  
  axios.interceptors.request.use((config) => {
      /** In dev, intercepts request and logs it into console for dev */
      if (DEBUG) { console.info("✉️ ", config); }
      return config;
  }, (error) => {
      if (DEBUG) { console.error("✉️ ", error); }
      return Promise.reject(error);
  });
  
  

• どのようなヘッダが渡されているかを確認したい場合／さらに汎用的なヘッダを追加したい場合、それは config.headers オブジェクトを作成します。例えば

  axios.interceptors.request.use((config) => {
      config.headers.genericKey = "someGenericValue";
      return config;
  }, (error) => {
      return Promise.reject(error);
  });
  
  

• 万が一、それが GET リクエストの場合、送信されるクエリパラメータは config.params オブジェクトを作成します。

レスポンスインターセプター

• も可能です。 オプションで をインターセプターレベルで解析し、元のレスポンスの代わりに解析されたレスポンスを渡します。APIが複数の場所で同じように使われる場合に、何度も解析ロジックを書く手間を省くことができるかもしれません。そのためのひとつの方法として api-request を作成し、レスポンスインターセプターで同じパラメータを使用してアクションを実行します。たとえば

  //Assume we pass an extra parameter "parse: true" 
  axios.get("/city-list", { parse: true });
  
  

  一度、レスポンスインターセプターの中で、次のように使ってみましょう。

  axios.interceptors.response.use((response) => {
      if (response.config.parse) {
          //perform the manipulation here and change the response object
      }
      return response;
  }, (error) => {
      return Promise.reject(error.message);
  });
  
  

  つまり、この場合、常に parse オブジェクトを response.config であれば、操作は完了し、それ以外のケースはそのまま動作します。

• 到着したものを表示することもできます HTTP のコードを読み込んでから判断します。例えば

  axios.interceptors.response.use((response) => {
      if(response.status === 401) {
           alert("You are not authorized");
      }
      return response;
  }, (error) => {
      if (error.response && error.response.data) {
          return Promise.reject(error.response.data);
      }
      return Promise.reject(error.message);
  });