axios和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
到此这篇关于Vue axios和vue-axios的关系及使用区别的文章就介绍到这了,更多相关Vue axios和vue-axios关系内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！