本篇文章给大家带来的内容是关于vue中使用axios请求拦截的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、前言
axios的基础使用就不过多的讲解啦，如何使用可以看axios文档使用说明·axios中文说明
在这里和大家分享一下axios拦截在实际项目中的使用
很多人都看过axios的官方文档中拦截器这一栏，有的人可能会有点懵，因为文档只告诉你有这个东西，而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器，毕竟拦截器是可以不使用的，但是使用拦截器，会在页面中减少很多不必要的代码。
二、说在前面的
项目使用的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.loginnamehttprequest.password= this.passwordthis.$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.loginnamehttprequest.password= this.passwordthis.$axios.post(/api/request, httprequest).then(data => { //这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined if(data){ //进行请求返回成功逻辑 }});
这样我们就对axios请求添加了拦截，可以减少很多代码逻辑，页面可读性更高，可维护性也更高
四、其他
这就是axios拦截的最基础的用法，当然也不止于此，我们也可以进行扩展延伸，做更多的事情，只要你的业务有需求，axios拦截总能帮到你，这些就需要举一反三，工具是死的人是活的，我可以再举个小例子，比如设置请求签名。
请求签名是前台和后台约定的一种沟通方式，对数据进行加密，可以一定程度上保证数据的安全性
还是以这个登录页面为例
//双向数据绑定获取值let httprequest = {};httprequest.loginname = this.loginnamehttprequest.password= this.passwordthis.$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}
这样我们就完成了对数据加密以及签名，这样再发送给后台。
注意：这里只作为例子展示，如果需要用到签名，如何签名，是前台和后台沟通的结果!
axios请求拦截的用处远远不止这样，具体如何使用，还需要在实际工作，实际项目中随机应变啦。
以上就是vue中使用axios请求拦截的方法介绍的详细内容。