Vue3 Axios インターセプターをリクエスト ファイルにカプセル化する方法

1. request.js という名前の新しいファイルを作成し、Axios にインポートします:

import axios from 'axios';

2. request という名前の関数を作成し、エクスポートします:

Create a 関数は request と呼ばれます。そして、ベース URL を持つ新しい Axios インスタンスに設定されます。ラップされた Axios インスタンスでタイムアウトを設定するには、Axios インスタンスの作成時にタイムアウト オプションを渡します。

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

3. リクエスト関数にインターセプタを追加します:

request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

これにより、リクエスト インターセプタとレスポンス インターセプタが追加されます。これらのインターセプターでは、要求が送信される前に認証ヘッダーを追加したり、応答が返された後に応答データにエラーがないかチェックしたりするなど、必要なアクションを実行できます。

4. 最後に、リクエスト関数をエクスポートします:

export default request;

これで、事前定義されたインターセプタを通過するすべてのネットワーク リクエストは、アプリケーションのリクエスト関数を通じて実行できるようになります。例:

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

これは、ラップされた Axios インスタンスを使用して GET リクエストを作成し、事前定義されたインターセプターを使用して応答を処理します。

完全な例:

送信前に送信されます。リクエスト トークンとユーザー名。リクエスト インターセプターを使用して、すべてのリクエストに認証ヘッダーを追加できます。

リクエスト インターセプターは、「token」と「username」という名前の値が localStorage に存在するかどうかを確認し、それらを Authorization として追加します。ユーザー名ヘッダー。必要に応じて、これらのヘッダーの名前と値を調整します。

応答データを操作するには、応答インターセプターを使用します。上記の例では、応答インターセプターは、応答データの「ステータス」属性が「成功」であるかどうかを検証します。そうでない場合は、エラーとして処理し、例外としてスローします。応答オブジェクトには、応答ヘッダー、ステータス コード、応答本文などのすべての情報を含む例外情報が含まれます。これらのチェックと例外スローのロジックは、実際の状況に応じて調整できます。

rree

以上がVue3 Axios インターセプターをリクエスト ファイルにカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。