拦截器是什么？
请求拦截器：就是在我们发起每一个axios请求之前，统一进行对请求前的一个拦截。
响应拦截器：在我们作出响应的时候，在响应之前就提前作出统一的拦截操作。
axios请求拦截器：
响应拦截器：
代码：
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log('1')
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('2')
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
效果：
那这种拦截器的需求到底是什么呢？多此一举？其实不然，它可以用来控制实现动态loading加载的效果，让我们向服务器请求数据的时候，让页面转圈圈，数据回来后（响应），让页面的动态loading消失，拦截器控制的就是这种需求，它可以让你在这两个过程充分发挥。
此外还可以在请求拦截器中的头信息添加携带数据，最常用的是令牌token、在响应拦截器中添加全局的错误处理。
具体案例实现：
点击按钮，数据没回来之前，显示加载，数据回来后，加载消失。
请求路径出错时，响应404的页面信息（这里需要故意写错请求路径，测试效果）。
携带令牌
案例前端代码：koa2+vue+axios
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./javascripts/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./stylesheets/style.css" />
<script src="./javascripts/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-show="control" style="height: 100px;width: 200px;">
<img width="100%" height="100%" src="images/1.gif" >
</div>
<div style="height: 200px;width: 200px;" v-if="show404">
<img width="100%" height="100%" src="images/2.gif" >
</div>
<button type="button" @click="handleClick">点击</button>
</div>
<script type="text/javascript">
const app = new Vue({
data() {
return {
control: false,
show404:false
}
},
methods:{
handleClick(){
let that = this //涉及请求的都需要更改指针
//this.control = true
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
that.control = true
config.headers.token = 'qinfubin' //发起请求时，携带令牌给后端，后端拿到令牌后，就可以判断当前用户的身份和权限
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
setTimeout(()=>{
that.control = false
},2000)
return response;
}, function (error) {
// 对响应错误做点什么
if(error.response.status == 404) {
that.show404 = true
}
return Promise.reject(error);
});
axios.get('/list',{
params:{
name:'Bom'
}
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
}
}
}).$mount("#app")
</script>
</body>
</html>
后端代码：
router.get('/list', async (ctx, next) => {
console.log(ctx.request.query)
ctx.body = {
errCode:0,
errMsg:"ok",
list:[
{"userName":"覃放","age":22}
]
}
})
总结：
网友评论