怎么在Vue中利用axios拦截请求
这期内容当中小编将会给大家带来有关怎么在Vue中利用axios拦截请求，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
成都创新互联主营太和网站建设的网络公司,主营网站建设方案,成都app软件开发,太和h5成都小程序开发搭建,太和网站营销推广欢迎太和等地区企业咨询
项目使用的ui框架是iview
以下友好提示均使用iview ui的message提示组件，例如this.$Message.xxx
/api/request 仅仅只是例子接口，实际开发用后台提供的接口。
code是后台状态码，我这里也只是例子，不要问我为毛我的返回码和你的怎么不一样这样的问题哈...这些都需要和后台沟通约定的。
使用的请求头是：axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于为什么使用这个请求头可以看看我的另外一篇文章关于axios会发送两次请求，有个OPTIONS请求的问题
因为使用的是这个请求头所以需要用qs模块，不然后台不认这个数据。
不使用请求拦截
如果不使用请求拦截，也是可以的，但是会多了非常多的代码，我们以登录页为例。
一个单纯，没有花里胡哨的页面，|ω・）
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
//特殊错误处理，状态为10时为登录超时
if(data.data.code === 10){
this.$Message.error("登录已超时，请重新登录")
this.$router.push("/login")
//其余错误状态处理
}else if(data.data.code != 0){
this.$Message.error(data.data.msg)
//请求成功
}else if(data.data.code === 0){
//进行成功业务逻辑
}
//.......
});如果不使用请求拦截，那么对每一条请求每一个状态都要特殊处理，如果请求特殊状态有数十个，每个页面有很多请求，那么页面会变得很长很臃肿，不好维护。
使用请求拦截
相同的请求返回代码我们可以抽取出来，写在请求拦截中
当我们设置了拦截之后，在我们的组件代码中可以简化很多，还是以登录界面为例：
在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中，我们对发送的数据进行拦截
//请求发送拦截
axios.interceptors.request.use((request) => {
//获取请求的数据，这里是loginName和password
let REQUEST_DATA = request.data
//获取请求的地址，这里是/api/request
let REQUEST_URL = request.url
//设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
//发送请求给后台
return request;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
//已封装好的签名函数
function requestDataFn(data, method) {
let postData = {}
//时间戳，时间戳函数不作展示，也是已封装好的
postData.timestamp = getNowFormatDate();
//请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
postData.session = localStorage.getItem('session') || '';
postData.secretKey = localStorage.getItem('secretKey') || '';
//请求的地址，这里是/api/request
postData.method = method;
//请求的数据这里是loginName和password，进行base64加密
let base64Data = Base64.encode(JSON.stringify(data));
//设置签名并进行md5加密
let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
//把数据再次进行加密
postData.data = encodeURI(base64Data);
postData.signature = signature;
return postData
}上述就是小编为大家分享的怎么在Vue中利用axios拦截请求了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
新闻名称：怎么在Vue中利用axios拦截请求
地址分享：http://cdiso.cn/article/pephoj.html
