Vue で axios をカプセル化するためのベスト プラクティス

Vue はフロントエンド開発で最も一般的に使用されるフレームワークの 1 つであり、Ajax リクエストはフロントエンド開発の非常に重要な部分です。開発者が使いやすくするために、Vue コミュニティでは Ajax リクエスト ライブラリ axios をカプセル化する実践が数多く行われています。この記事では、Vue で axios をカプセル化するためのベスト プラクティスを紹介し、Vue プロジェクトでの axios の使用方法をより深く理解するのに役立ちます。

1. axios のカプセル化

Vue プロジェクトでは、使いやすくするために axios をカプセル化する必要があります。標準の axios パッケージは次のとおりです。

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前进行token鉴权
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      // 抛出异常信息
      return Promise.reject(new Error(res.message || '错误'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push({ path: '/login' })
    }
    return Promise.reject(error)
  }
)

export default service

上記のコードは、axios インスタンスを作成し、そのインスタンスのリクエストとレスポンスのインターセプターを構成します。リクエスト インターセプターでは、ストアを通じてユーザー トークンを取得し、それを認証用のリクエスト ヘッダーに追加できます。応答インターセプターでは、サーバー応答の例外と未承認のリクエスト、および返されたデータの処理を処理します。

2. http リクエストのカプセル化

axios を使用する場合、通常、統合管理を容易にするために http リクエストをさらにカプセル化する必要があります。以下では、さまざまな http リクエストのラッパーを作成します。

get リクエスト:

import http from '@/utils/http'

export default {
    get(url, params) {
        return http.get(url, {
            params: params
        })
    }
}

post リクエスト:

import http from '@/utils/http'

export default {
    post(url, data) {
        return http.post(url, data)
    }
}

delete リクエスト:

import http from '@/utils/http'

export default {
    delete(url) {
        return http.delete(url)
    }
}

put リクエスト:

import http from '@/utils/http'

export default {
    put(url, data) {
        return http.put(url, data)
    }
}

上記のパッケージを通じて, http リクエストを使用する場合は、対応するメソッドを直接呼び出すことができます。

3. Vue プロジェクトでの使用

Vue プロジェクトでカプセル化された axios と http リクエストを使用するには、次のことを行う必要があります:

まず、 axios とカプセル化された http リクエストを main.js ファイルに導入します:

import axios from 'axios'
import http from '@/utils/http'

Vue.prototype.$axios = axios
Vue.prototype.$http = http

次に、それをコンポーネントで使用します:

import api from '@/api/api'

export default {
  name: 'Demo',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {
        // 请求参数
      }
      api.get('/data', params).then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  }
}

ここでは、API でカプセル化された http リクエストを導入し、マウントされたライフ サイクル中に、getData メソッドが呼び出されて http リクエストが開始され、結果が最終的にページに表示されます。

4. 結論

この記事では、Vue で axios をカプセル化するためのベスト プラクティスを紹介します。これらのプラクティスは、開発効率を向上させ、コードの重複を減らすのに非常に役立ちます。 Vue を初めて使用する開発者にとって、これらのテクニックは簡単に学習して理解することができ、実際の開発でもより大きな役割を果たすことができます。

以上がVue で axios をカプセル化するためのベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。