Vue axios和vue-axios关系
张童瑶 人气:0axios和vue-axios的关系/区别
1、axios
是基于promise的HTTP库,可以使用在浏览器和node.js
中,它不是vue的第三方插件
2、axios
使用的时候不能像vue的插件(如:Vue-Router、VueX等)通过Vue.use()
安装插件,需要在原型上进行绑定使用:Vue.prototype.$http = axios;
3、vue-axios
是axios
集成到Vue.js
的小包装器,可以像插件一样安装使用:Vue.use(VueAxios, axios);
axios和vue-axios的使用方式区别
1、axios使用方式
npm install --save axios
# 在入口文件main.js中配置 import Vue from 'vue' import axios from 'axios' Vue.prototype.$http = axios # 第三步:使用案例 this.$http.get('/user?id=666').then((response) => { console.log(response.data) }).catch( (error) => { console.log(error); });
2、vue-axios使用方式
npm install --save vue-axios # 或者 npm install --save axios vue-axios
#在入口文件main.js中配置 import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) #第三步:使用方式有如下三种 #方式1 Vue.axios.get(api).then((response) => { console.log(response.data) }) #方式2 this.axios.get(api).then((response) => { console.log(response.data) }) #方式3 this.$http.get(api).then((response) => { console.log(response.data) })
axios和vue-axios的使用哪一种较好
使用 Vue 的插件写法,更符合 Vue 整体生态环境。而直接写原型链,感觉有些粗暴了,除非是很底层的实现,否则不太推荐这样写了。因此,我们更推荐使用vue-axios
插件的方式,不太推荐是直接使用axios
的方式。
vue-axios-plugin插件的使用
在使用axios或vue-axios时我们基本都会需要配置axios的拦截器,对axios的请求、响应进行二次封装, 会多一道工作。作为一名程序员,切记不要重复造轮子。在vue项目当中,可以使用vue-axios-plugin
插件。使用步骤如下:
#第一步:首先通过 npm 安装 npm install --save vue-axios-plugin #然后在main.js入口文件配置如下: mport Vue from 'Vue' import VueAxiosPlugin from 'vue-axios-plugin' Vue.use(VueAxiosPlugin, { // 第二步:请求拦截处理 reqHandleFunc: config => config, reqErrorFunc: error => Promise.reject(error), // 响应拦截处理 resHandleFunc: response => response, resErrorFunc: error => Promise.reject(error) }) #第三步:使用案例 #在 Vue 组件上添加了 $http 属性, 它默认提供 get 和 post 方法,使用如下 this.$http.get(url, data, options).then((response) => { console.log(response) }) this.$http.post(url, data, options).then((response) => { console.log(response) }) #你也可以通过 this.$axios 来使用 axios 所有的 api 方法,比如: this.$axios.get(url, data, options).then((response) => { console.log(response) }) this.$axios.post(url, data, options).then((response) => { console.log(response) })
axios插件文档:http://www.axios-js.com/zh-cn/docs/vue-axios-plugin.html
加载全部内容