axios 用了有一段时间了,可能对于刚入手的同学来说,和vue-resource没啥区别。但是有没有相关,为啥那么多人喜欢用axios,而不用vue-resource啦。axios有很多的黑科技,比如全局注册变量,全局拦截等等,对于开发来说,可以节省很多事儿!!!
一、安装axios
老规矩,要想使用axios,我们得安装它,安装方式:npm install axios --save
二,在入库文件main.js(我的是main.js)中引入axios
import axios from 'axios'
然后注册到vue的全局变量上,就可以在别的任何组件中使用了。
Vue.prototype.$axios = axios
三,在组件HelloWorld.vue中使用axios
这里我用的csdn的一个接口"https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1531884384612144"
如果拿来直接用,会报跨域错误,我想大家应该都知道原因吧!!!
那么怎么办啦,可能你首先会想到jsonp,或者代理的方式。不过这里jsonp就行不通了。具体原因自己思考。
下面用代理的方式解决这个跨域的问题。
首先,在config目录下的index文件中dev下找到proxyTable 这个地方,添加如下代码:
proxyTable: { // 在这里配置如下代码
'/api': {
target:'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1531884384612144', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '/api' // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
}
}
},
然后在组件中调用接口:
{{ msg }}
- {{item.title}}
这时在浏览器查看发现正常返回了数据,样式没做处理,自己做可以美化一下。
四,本文的重点:接口全局注册参数变量和添加全局拦截
第一步,axios全局注册参数变量,本文以登录为例,通常最常用的token形式。为了安全,通常token都是放在header中的,做过的同学都知道。
首先在入口文件mian.js中添加如下代码
//添加全局token
Vue.prototype.$axios.defaults.headers['authorization'] = "my token";
然后重启,在浏览器查看,header中已经有了这个参数authorization。
第二步,axios添加全局接口拦截
同样也是在入口文件mian.js中添加代码:
//添加全局拦截
Vue.prototype.$axios.interceptors.response.use(function (response) {
let rps = response.data;
//假设token失效 返回的code是401
console.log(rps);
if(rps.ret == 401){
//具体的处理逻辑代码写在此处
}
return response;
}, function (err) {
console.log(err);
});
到此,本文的重点全部讲完了,是不是觉得axios很强大。
源码下载地址github:https://github.com/catbea/px2rem
看了此文,有收货的话,可以关注一下。后面还有很多黑科技哦