Vue的axios插件实现GET、POST、JSONP请求，以及请求拦截

1.需要引入vue.js和axios.js(小编比较懒直接引用的bootstrap来做样式)

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>

2.在HTML中请求按钮

<div id="app" class="container">
<h1>axios</h1>
<a href="javascript:;" @click="get" class="btn btn-primary">GET请求</a>
<a href="javascript:;" @click="post" class="btn btn-primary">POST请求</a>
<a href="javascript:;" @click="http" class="btn btn-primary">http请求</a>
<a href="javascript:;" @click="jsonp" class="btn btn-primary">jsonp请求</a><br><br>
<span>
<span>axios的http请求中method的传参：</span> <br><br>
<span class="btn btn-success">post请求是通过data传递参数</span>
<span class="btn btn-success">get请求是通过params传递参数</span>
</span>
<br>
<span>{{msg}}</span>
</div>

3.这里就是重点啦！请求+拦截

<script>
new Vue({
el: '#app',
data: {
msg: ''
},
mounted: function () {
axios.interceptors.request.use(function (config) {
console.log('request init' + config);
//可以添加请求前的 ---  Loading效果处理
return config;
});
axios.interceptors.response.use(function (response) {
console.log('response init' + response);
//可以添加响应过后的 ---  效果处理
return response;
});
},

methods: {
get: function () {
axios.get('../package.json', {
params: {
userId: '105'
},
headers: {
token: '123'
},
before: function () {
console.log('before init');
}
}).then(res => {
this.msg = res.data;
}).catch(function (error) {
console.log('error init' + error);
})
},
post: function () {
axios.post('../package.json', {
userId: '333',
headers: {
token: 'Mr.wang'
}
}).then(res => {
this.msg = res.data;
})
},
http: function () {
axios({
url: '../package.json',
method: 'get',
data: {
userId: '106'
},
headers: {
token: 'http-test'
}
}).then(res => {
this.msg = res.data;
console.log(res.data);
})
},
jsonp: function () {
axios({
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json; charset=UTF-8',
'Access-Control-Allow-Origin': '*'
},//设置跨域请求头
method: "POST",//请求方式
url: "https://solelynet.com/public/index.php/api/v1/UserMenu/GetTree",//请求地址
data: {
"menu_id": 1,
"thirdapp_id": 1//请求参数

}
})
.then(function (res) {
//返回值
console.log(res.data);
for (var i = 0; i < res.data.length; i++) {
console.log(res.data[i].name)
}
})
.catch(function (err) {
console.log(err);
});
}
}
})
</script>