axios和vue |
您所在的位置：网站首页 › axios是基于什么的 › axios和vue |
axios和vue
|
今天潘老师在搭建vue项目时，想引入axios打开其官方文档，发现推荐的使用方式除了要安装axios还安装了vue-axios，潘老师之前一直都是直接用axios，没用过vue-axios，不由地好奇两者之间是有什么区别，使用哪一个是更优的选择。下面，我们来一起看一下axios和vue-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-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 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)
|
【本文地址】
今日新闻 |
推荐新闻 |