axios和vue-axios的关系及使用区别

Web前端 潘老师 2年前 (2021-12-15) 2011 ℃ (1) 扫码查看

今天潘老师在搭建vue项目时,想引入axios打开其官方文档,发现推荐的使用方式除了要安装axios还安装了vue-axios,潘老师之前一直都是直接用axios,没用过vue-axios,不由地好奇两者之间是有什么区别,使用哪一个是更优的选择。下面,我们来一起看一下axiosvue-axios的关系及使用区别

一、axios和vue-axios的关系/区别

  • 1、axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件
  • 2、axios使用的时候不能像vue的插件(如:Vue-Router、VueX等)通过Vue.use()安装插件,需要在原型上进行绑定使用:Vue.prototype.$http = axios;
  • 3、vue-axiosaxios集成到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 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)
})

更多的内容请参考官方文档:vue-axios-plugin


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/4033.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

(1) 个小伙伴在畅所欲言
  1. 用户头像
    感谢分享 赞一个
    防水涂料加盟 2021-12-22 10:53 回复