当我们设置了拦截之后，在我们的组件代码中可以简化很多，还是以登录界面为例：
在main.js中
//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {
//这个例子中data是loginName和password
let REQUEST_DATA = request.data
//统一进行qs模块转换
request.data = qs.stringify(REQUEST_DATA)
//再发送给后台
return request;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
//特殊错误处理，状态为10时为登录超时
if (response.data.code === 10) {
iView.Message.error("登录已超时，请重新登录");
router.push("/login")
//其余错误状态处理
} else if (response.data.code != 0) {
iView.Message.error(response.data.msg)
//请求成功
} else if(response.data.code === 0){
//将我们请求到的信息返回页面中请求的逻辑
return response;
}
//......
}, function (error) {
return Promise.reject(error);
});
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
//这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
if(data){
//进行请求返回成功逻辑
}
});这样我们就对axios请求添加了拦截，可以减少很多代码逻辑，页面可读性更高，可维护性也更高
四、其他
这就是axios拦截的最基础的用法，当然也不止于此，我们也可以进行扩展延伸，做更多的事情，只要你的业务有需求，axios拦截总能帮到你，这些就需要举一反三，工具是死的人是活的，我可以再举个小例子，比如设置请求签名。
请求签名是前台和后台约定的一种沟通方式，对数据进行加密，可以一定程度上保证数据的安全性
还是以这个登录页面为例
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
//这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
if(data){
//进行请求返回成功逻辑
}
});我们把httpRequest这个data信息数据发送给后台之前，进行签名，并加密数据
在main.js中，我们对发送的数据进行拦截
//请求发送拦截
