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

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

WBOY

リリース： 2023-07-18 08:57:09

オリジナル

2024 人が閲覧しました

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

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

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. データレスポンスインターセプター

レスポンスインターセプターの役割
レスポンスインターセプターは、レスポンスを取得した後にインターセプトし、エラー処理などのレスポンスに対して何らかの処理を実行できます。 .情報、返されたデータのフォーマットなど。通常、一部のグローバルエラー情報を処理するために応答インターセプターを使用します。
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. グローバル構成

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

// main.js

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

Vue.prototype.$http = axios

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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