如果我们在进行Vue项目开发的时候，有俩个或者更多的组件中使用到了ajax请求

那么我们每一个组件都需要注册导入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接口的复用的

在Vue原型文件中挂载Axios--便于维护

Vue原型文件全局挂载axios自定义属性

Vue原型文件全局配置axios请求根路径

猜你喜欢