我要评论axios 在 Vue 中的使用方式
axios 是一个库，不是 Vue 中的第三方插件，所以使用时不能通过 Vue.use() 来安装。
绑定到原型链
一般在项目的入口文件 main.js 中引入并绑定到原型链上
// main.js
import Vue from 'vue'
import axios from 'axios'
// 绑定到原型链上
Vue.prototype.$http = axios
axios.defaults.baseURL = 'https://www.baidu.com/' // 还可以设置请求的根路径
使用方法
this.$http.get('person').then(res => {
// some code ...
})
this.$http.post('login', { name: 'cez', psw: '123' }).then(res => {
// some code ...
})
vue-axios
如果想让 axios 和插件一样可以使用 Vue.use() 安装，可以通过 vue-axios 插件来实现。
在项目入口文件 main.js 引入并配置
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
通过
vue-axios就可以实现使用Vue.use()来安装axios。
使用方法
Vue.axios.get('login').then(res => {
// some code ...
})
this.axios.get('login').then(res => {
// some code ...
})
this.$http.get('login').then(res => {
// some code ...
})
第三种方法
把所有 api 接口封装到一个文件 api.js
// api.js
import axios from 'axios'
// 导出 api 接口
export function getName (params) {
return axios({
url: '请求路径',
method: '请求方法',
params, // 请求参数
})
}
使用方法
import { getName } from 'api.js' // 导入接口
getName(params).then(res => {
// some code ...
})
一般都使用这种方法，封装性好，后期方便维护。
本文地址：https://blog.csdn.net/CEZLZ/article/details/108123007
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论