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即可。
}
}
},然后在组件中调用接口：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ul>
<li v-for="(item,index) in allData" :key="index">{{item.title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'axios 黑科技',
allData:[]
}
},
created(){
this.axiosTest();
},
methods:{
axiosTest(){
this.$axios({
method: 'get',
url: "/api",
}).then((response) => {
var data=response.data;
this.allData = data.articles;
}).catch(err =>{
console.log(err);
})
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
font-size: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
width: 100%;
text-align: left;
display: inline-block;
margin: 0 10px;
font-size: 30px;
list-style: decimal;
}
a {
color: #42b983;
}
</style>
这时在浏览器查看发现正常返回了数据，样式没做处理，自己做可以美化一下。
四，本文的重点：接口全局注册参数变量和添加全局拦截
第一步，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
看了此文，有收货的话，可以关注一下。后面还有很多黑科技哦