web-dev-qa-db-ja.com

どのように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);
});

また、多くのチュートリアルではこのコードのみを示していますが、使用目的がわかりません。簡単な例を教えてください。

javascriptaxios
16
Akash Salunkhe

簡単に言えば、これはすべての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が複数の場所で同じように使用される場合、解析ロジックを何度も書く時間を節約できます。そのための1つの方法は、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);
});

したがって、この場合、response.configにparseオブジェクトがある場合はいつでも操作が行われ、残りの場合はそのまま動作します。

=>到着する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);
});
18
Aseem Upadhyay

これはミドルウェアのようなもので、基本的にはリクエスト（GET、POST、PUT、DELETE）または応答（サーバーから取得した応答）に追加されます。認可が関係する場合によく使用されます。

これを見てください： Axiosインターセプターと非同期ログイン

これに関する別の記事を別の例で紹介します。 https://medium.com/@danielalvidrez/handling-error-responses-with-grace-b6fd3c5886f

したがって、いずれかの例の要点は、インターセプターを使用して、許可トークンの有効期限が切れているかどうかを検出し（たとえば403を取得した場合）、ページをリダイレクトできることです。

6
Constantin Chirila