如果我们在进行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接口的复用的