リクエストインターセプタリクエストレスポンダ

VueやReactなどのフロントエンドフレームワークで開発する場合、通常はaxiosなどのライブラリを使用してネットワークリクエストを行います。これらのライブラリには通常、インターセプタの機能があり、リクエストが送信される前と応答が返された後に、リクエストまたはレスポンスの一部の関連パラメータまたはデータをインターセプトして変更するために使用されます。リクエストインターセプターとレスポンスインターセプターの使用法を簡単に紹介します。

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

リクエストインターセプターは、リクエストが送信される前にリクエストをインターセプトし、リクエストヘッダーへのトークンの追加やリクエストタイムアウトの追加など、いくつかの統合処理または変更操作を実行できます。axios では、 axios.interceptors.request.use メソッドを使用してインターセプターを追加できます。以下に例を示します。

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 添加 token
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  // 添加超时时间
  config.timeout = 10000;
  return config;
}, function (error) {
  // 请求错误时进行处理
  return Promise.reject(error);
});

上記のコードでは、 axios.interceptors.request.use メソッドを呼び出してリクエストインターセプターを追加しました。このリクエストインターセプターは、リクエストを送信する前にリクエストヘッダーにフィールドを追加します Authorization 。このフィールドの値は、localStorage から取得したトークンです。同時に、フィールドを構成オブジェクトに追加します。 timeout このフィールドの対応する値は、リクエストのタイムアウト期間は 10000 ミリ秒です。

応答インターセプター

応答インターセプターは、要求応答が返された後に応答をインターセプトし、トークンの有効期限が切れているかどうかの判断、バックエンド例外のキャプチャなど、いくつかの統合処理または変更操作を実行できます。axios では、 axios.interceptors.response.use メソッドを使用してインターセプターを追加できます。以下に例を示します。

import axios from 'axios';

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 判断 token 是否过期并进行处理
  if (response.data.code === 401) {
    // 跳转到登录页面
    window.location.href = '/login';
  }
  // 捕获后端异常并进行处理
  if (response.data.code !== 0) {
    // 弹出错误提示框等
    console.error(response.data.msg);
  }
  return response;
}, function (error) {
  // 对响应的错误进行处理
  return Promise.reject(error);
});

上記のコードでは、 axios.interceptors.response.use メソッドを呼び出して応答インターセプターを追加しました。このレスポンスインターセプタは、リクエストが返された後に返されたステータスコードが 401 であるかどうかを判断します。401 である場合は、ログインページにジャンプします。また、バックエンドの例外情報もキャプチャします。返されたステータスコードが 0 でない場合は、エラーが発生します。プロンプトボックスなどが表示されます。