データ リクエスト インターセプターと Vue および Axios のグローバル構成

データ リクエスト インターセプタと Vue および Axios のグローバル構成

1. はじめに
Vue プロジェクトの開発プロセス中、データ リクエストを行うために Axios ライブラリをよく使用します。 Axios は、リクエストとレスポンスを前処理してプロジェクトの柔軟性とセキュリティを強化できるリクエスト インターセプタとレスポンス インターセプタの機能を提供します。この記事では、Vue と Axios のデータ リクエスト インターセプターとグローバル設定を使用して、グローバル リクエストの設定と処理を実装する方法を紹介します。

2. データ リクエスト インターセプター

1. リクエスト インターセプターの役割
   リクエスト インターセプターはリクエストを送信する前にインターセプトし、リクエストに対して追加などの処理を実行できます。リクエストヘッダー、認証の追加など。通常、リクエスト インターセプターを使用して、グローバル構成を追加します。
2. Vue プロジェクトでのリクエスト インターセプターの構成
   Vue プロジェクトでは、Axios の interceptors プロパティを通じてリクエスト インターセプターを構成できます。サンプル コードは次のとおりです。

// main.js

import axios from 'axios'

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 进行一些处理，例如添加请求头、身份验证等
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token')
  return config
}, function (error) {
  return Promise.reject(error)
})

Vue.prototype.$http = axios

上記のコードでは、リクエスト ヘッダー Authorization をリクエスト インターセプターに追加し、バックグラウンドから返されたトークン値をリクエストヘッダー。このようにして、リクエストの送信時に認証情報が自動的に取得されます。

3. データ レスポンス インターセプター

1. レスポンス インターセプターの役割
   レスポンス インターセプターは、レスポンスを取得した後にインターセプトし、エラー処理などのレスポンスに対して何らかの処理を実行できます。 .情報、返されたデータのフォーマットなど。通常、一部のグローバル エラー情報を処理するために応答インターセプターを使用します。
2. Vue プロジェクトでの応答インターセプターの構成
   Vue プロジェクトでは、Axios の interceptors プロパティを通じて応答インターセプターを構成することもできます。サンプル コードは次のとおりです。

// main.js

// 响应拦截器
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  // 处理一些错误信息
  if (error.response) {
    // 根据错误状态码进行处理
    switch (error.response.status) {
      case 401:
        // 处理未授权的情况
        break
      case 403:
        // 处理权限不足的情况
        break
      case 500:
        // 处理服务器错误的情况
        break
      // ...
    }
  }
  return Promise.reject(error)
})

Vue.prototype.$http = axios

上記のコードでは、応答インターセプターでいくつかの一般的なエラー ステータス コードを処理し、さまざまなステータス コードに従って対応する処理を実行します。これにより、エラー発生時にエラー情報を統一的に処理することができる。

4. グローバル構成

1. Axios のグローバル デフォルト値の構成
   インターセプターを使用してリクエストと応答を処理することに加えて、Axios のグローバル デフォルト値を構成することもできます。いくつかのグローバル構成を実装するため。サンプル コードは次のとおりです。

// main.js

axios.defaults.baseURL = 'http://api.example.com'
axios.defaults.timeout = 5000

Vue.prototype.$http = axios

上記のコードでは、Axios のグローバル デフォルト値を設定します。ここで、baseURL はリクエストのベース URL を表し、 はリクエストのベース URL を表します。 timeout はリクエストのタイムアウトを表します。

2. 個々のリクエストの特別な構成
   グローバル構成に加えて、個々のリクエストで特別な構成を実行して、グローバルのデフォルト値をオーバーライドすることもできます。サンプル コードは次のとおりです。

// 在组件中的某个方法中发起请求
this.$http.get('/api/data', {
  timeout: 10000
})

上記のコードでは、リクエストで特別な構成を渡すことによって、グローバルなデフォルトのタイムアウトをオーバーライドします。

5. 概要
データ リクエスト インターセプターと Vue および Axios のグローバル構成を通じて、リクエストとレスポンスを前処理して、プロジェクトの柔軟性とセキュリティを強化できます。リクエスト ヘッダーの追加、エラー メッセージの処理など、インターセプターを介したグローバル構成と処理を実装できます。同時に、グローバル構成と特殊構成により、さまざまなニーズにも対応できます。実際の開発では、これらの機能を実情に応じて柔軟に活用することで、開発効率やコード品質の向上を図ることができます。

以上がデータ リクエスト インターセプターと Vue および Axios のグローバル構成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。