需求：发送请求前拦截，显示加载页面，响应结束后隐藏加载页面。
一、定义加载页面，在该界面添加一个控制显示与隐藏的命令 v-show。
<div> <div class="spinner" v-show='isShow'> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> <button @click='sendAjax'>发请求</button> </div>
二、在 sendAjax 方法中实现一个 cookie 的机制。
1、添加请求拦截器 interceptors.request 。
// 添加请求拦截器
this.$axios.interceptors.request.use((config)=>{
// 在发送请求之前做什么
var token = localStorage.getItem('token');
if(token){
// 配置对象设置响应头
config.headers['token'] = token;
}
this.isShow = true;
return config;
},function(error){
// 对请求错误做些什么
return Promise.reject(error);
});
2、添加响应拦截器 interceptors.response 。
// 添加响应拦截器
this.$axios.interceptors.response.use((response)=>{
// 对响应数据做点什么
console.log("这是响应"+response.data.token);
if(response.data.token){
localStorage.setItem('token', response.data.token);
}
// 响应结束
this.isShow = false;
return response;
},(error)=>{
// 对响应错误做点什么
return Promise.reject(error);
});
3、发送请求。
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
this.$axios.get('')
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.spinner {
margin: 100px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner>div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes stretchdelay {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="../vue/vue.js"></script>
<script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data(){
return{
isShow:false
}
},
template:`
<div>
<div class="spinner" v-show='isShow'>
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<button @click='sendAjax'>发请求</button>
</div>
`,
methods:{
sendAjax(){
// 实现一个类似cookie的机制
// 添加请求拦截器
this.$axios.interceptors.request.use((config)=>{
// 在发送请求之前做什么
var token = localStorage.getItem('token');
if(token){
// 配置对象设置响应头
config.headers['token'] = token;
}
this.isShow = true;
return config;
},function(error){
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
this.$axios.interceptors.response.use((response)=>{
// 对响应数据做点什么
console.log("这是响应"+response.data.token);
if(response.data.token){
localStorage.setItem('token', response.data.token);
}
// 响应结束
this.isShow = false;
return response;
},(error)=>{
// 对响应错误做点什么
return Promise.reject(error);
});
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/';
this.$axios.get('')
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
}
}
// 将axios挂载到Vue对象上
Vue.prototype.$axios = axios
new Vue({
el:'#app',
template:`
<App/>
`,
components:{
App
}
});
</script>
</body>
</html>
标签：animation,axios,return,请求,interceptors,token,拦截器,webkit,response From： https://www.cnblogs.com/sfwu/p/16909956.html