Vue中對axios進行封裝的最佳實踐

Vue是目前前端開發中最常用的框架之一，而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實例，並對其進行了request和response攔截器的配置。在request攔截器中，我們可以透過store取得使用者token，並將其加入到請求頭中進行鑑權。在response攔截器中，我們處理了伺服器回應異常和未授權的請求，以及對回傳資料的處理。

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請求，需要進行以下操作：

首先，我們需要在main.js檔案中引入axios和封裝好的http請求：

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請求引入，並在mounted生命週期中呼叫getData方法啟動http請求，最終將結果展示在頁面中。

4. 結論

本文介紹了在Vue中對axios進行封裝的最佳實踐，這些實踐在提高開發效率、降低程式碼重複等方面都有很好的作用。對於那些剛接觸Vue的開發者來說，這些技巧能夠輕鬆學習和理解，在實際開發中也能發揮更大的作用。

以上是Vue中對axios進行封裝的最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！