vue组件化中使用axios

分类:vue

前言

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

由于 Axios 并不是专门为 vue 制作的插件,并没有按照 vue 插件化的方式编写,因此不能直接使用Vue.use(axios)的方式在注册插件。

那么如何在 vue 组件化当中使用 Axios 呢?这里提供两种使用方法:

将 Axios 写入 vue 原型

我们可以将 Axios 直接写入到 vue 的原型中,将其作为 vue 的方法来调用:

main.js
1
2
3
4
5
//引入axios
import axios from "axios";

// 将axios写入原型
Vue.prototype.$http = axios;

然后在其他组件中使用:

a.vue
1
2
3
this.$http.get(url).then(function(res) {
console.log(res);
});

使用 vue-axios(推荐)

首先安装vue-axios

a
1
npm i -D vue-axios

然后引入使用:

main.js
1
2
3
4
5
// 引入axios和vue-axios
import axios from "axios";
import VueAxios from "vue-axios";
// 挂载
Vue.use(VueAxios, axios);

在其他组件中使用:

a.vue
1
2
3
this.axios.get(url).then(function(res) {
console.log(res);
});

比较 or 总结

首先 vue-axios 是按照 Vue 的插件文档来写的,直接绑在原型链上不是不可以,如果像这样注册一个$http,和项目其他成员协作的时候就必须注明你注册的变量名称,而使用 vue-axios 大家就没有歧义了。

说白了,vue-axios 使用 Vue 的插件写法,更符合 Vue 整体生态环境。