在Vue原型檔案中挂載Axios--便于維護

如果我們在進行Vue項目開發的時候，有倆個或者更多的元件中使用到了ajax請求

那麼我們每一個元件都需要注冊導入axios子產品并發起很多次的請求

目錄

Vue原型檔案全局挂載axios自定義屬性

Vue原型檔案全局配置axios請求根路徑

就像這樣：

// 元件1
import axios from 'axios'
export default {
  methods: {
    async getInfo () {
      const { data: res } = await axios.get('http://www.xxxxxx/api/get')
      console.log(res)
    }
  }
}
           

// 元件2
import axios from 'axios'
export default {
  methods: {
    async postInfo () {
      const { data: res } = await axios.post(
        'http://www.xxxxxx/api/post',
        { username: 'zs', age: 18 })
      console.log(res)
    }
  }
}
           

非常的繁瑣，我們有沒有可能讓他簡便一些呢？

當然有-----

Vue原型檔案全局挂載axios自定義屬性

我們可以在main.jsVue原型檔案中挂載一個自定義屬性，全局可用axios子產品：

import axios from 'axios'
// 挂載一個自定義屬性$http
Vue.prototype.$http = axios
           

這樣我們在任何一個元件中都是可以使用 Vue執行個體.自定義屬性 來發起請求了

export default {
  methods: {
    async postInfo () {
      const { data: res } = await this.$http.post(
        'http://www.xxxxxx/api/post',
        { username: 'zs', age: 18 })
      console.log(res)
    }
  }
}
           

Vue原型檔案全局配置axios請求根路徑

還能更加的簡便一些--

比如可以在全局配置axios請求的根路徑--

這樣可以優化代碼并且有利于日後的項目維護

import axios from 'axios'
// 挂載一個自定義屬性$http
Vue.prototype.$http = axios
// 全局配置axios請求根路徑(axios.預設配置.請求根路徑)
axios.defaults.baseURL = 'http://www.xxxxxx'
           

接下來我們使用的時候就可以隻填寫請求路徑字尾：

export default {
  methods: {
    async getInfo () {
      const { data: res } = await this.$http.get('/api/get')
      console.log(res)
    }
  }
}
           

但是這樣是無法實作API接口的複用的