经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
在Vue中使用axios请求拦截的实现方法
来源:jb51  时间:2018/10/26 9:46:07  对本文有异议

一、前言

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模块,不然后台不认这个数据。

三、不使用请求拦截

如果不使用请求拦截,也是可以的,但是会多了非常多的代码,我们以登录页为例。

一个单纯,没有花里胡哨的页面,|ω・)

  1. //双向数据绑定获取值
  2. let httpRequest = {};
  3. httpRequest.loginName = this.loginName
  4. httpRequest.password= this.password
  5. this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
  6. //特殊错误处理,状态为10时为登录超时
  7. if(data.data.code === 10){
  8. this.$Message.error("登录已超时,请重新登录")
  9. this.$router.push("/login")
  10. //其余错误状态处理
  11. }else if(data.data.code != 0){
  12. this.$Message.error(data.data.msg)
  13. //请求成功
  14. }else if(data.data.code === 0){
  15. //进行成功业务逻辑
  16. }
  17. //.......
  18. });

如果不使用请求拦截,那么对每一条请求每一个状态都要特殊处理,如果请求特殊状态有数十个,每个页面有很多请求,那么页面会变得很长很臃肿,不好维护。

三、使用请求拦截

相同的请求返回代码我们可以抽取出来,写在请求拦截中

当我们设置了拦截之后,在我们的组件代码中可以简化很多,还是以登录界面为例:

在main.js中

  1. //请求发送拦截,把数据发送给后台之前做些什么......
  2. axios.interceptors.request.use((request) => {
  3. //这个例子中data是loginName和password
  4. let REQUEST_DATA = request.data
  5. //统一进行qs模块转换
  6. request.data = qs.stringify(REQUEST_DATA)
  7. //再发送给后台
  8. return request;
  9. }, function (error) {
  10. // Do something with request error
  11. return Promise.reject(error);
  12. });
  13. //请求返回拦截,把数据返回到页面之前做些什么...
  14. axios.interceptors.response.use((response) => {
  15. //特殊错误处理,状态为10时为登录超时
  16. if (response.data.code === 10) {
  17. iView.Message.error("登录已超时,请重新登录");
  18. router.push("/login")
  19. //其余错误状态处理
  20. } else if (response.data.code != 0) {
  21. iView.Message.error(response.data.msg)
  22. //请求成功
  23. } else if(response.data.code === 0){
  24. //将我们请求到的信息返回页面中请求的逻辑
  25. return response;
  26. }
  27. //......
  28. }, function (error) {
  29. return Promise.reject(error);
  30. });
  31. //双向数据绑定获取值
  32. let httpRequest = {};
  33. httpRequest.loginName = this.loginName
  34. httpRequest.password= this.password
  35. this.$axios.post("/api/request", httpRequest).then(data => {
  36. //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
  37. if(data){
  38. //进行请求返回成功逻辑
  39. }
  40. });

这样我们就对axios请求添加了拦截,可以减少很多代码逻辑,页面可读性更高,可维护性也更高

四、其他

这就是axios拦截的最基础的用法,当然也不止于此,我们也可以进行扩展延伸,做更多的事情,只要你的业务有需求,axios拦截总能帮到你,这些就需要举一反三,工具是死的人是活的,我可以再举个小例子,比如设置请求签名。

请求签名是前台和后台约定的一种沟通方式,对数据进行加密,可以一定程度上保证数据的安全性

还是以这个登录页面为例

  1. //双向数据绑定获取值
  2. let httpRequest = {};
  3. httpRequest.loginName = this.loginName
  4. httpRequest.password= this.password
  5. this.$axios.post("/api/request", httpRequest).then(data => {
  6. //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
  7. if(data){
  8. //进行请求返回成功逻辑
  9. }
  10. });

我们把httpRequest这个data信息数据发送给后台之前,进行签名,并加密数据

在main.js中,我们对发送的数据进行拦截

  1. //请求发送拦截
  2. axios.interceptors.request.use((request) => {
  3. //获取请求的数据,这里是loginName和password
  4. let REQUEST_DATA = request.data
  5. //获取请求的地址,这里是/api/request
  6. let REQUEST_URL = request.url
  7. //设置签名并进行qs转换,且赋值给request的data,签名函数另外封装
  8. request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  9. //发送请求给后台
  10. return request;
  11. }, function (error) {
  12. // Do something with request error
  13. return Promise.reject(error);
  14. });
  15. //已封装好的签名函数
  16. function requestDataFn(data, method) {
  17. let postData = {}
  18. //时间戳,时间戳函数不作展示,也是已封装好的
  19. postData.timestamp = getNowFormatDate();
  20. //请求用户的session以及secretKey信息,为空是未登录,登录后我把它存在localStorage中,这个存在哪里都可以,这里只作为例子。
  21. postData.session = localStorage.getItem('session') || '';
  22. postData.secretKey = localStorage.getItem('secretKey') || '';
  23. //请求的地址,这里是/api/request
  24. postData.method = method;
  25. //请求的数据这里是loginName和password,进行base64加密
  26. let base64Data = Base64.encode(JSON.stringify(data));
  27. //设置签名并进行md5加密
  28. let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
  29. //把数据再次进行加密
  30. postData.data = encodeURI(base64Data);
  31. postData.signature = signature;
  32. return postData
  33. }

这样我们就完成了对数据加密以及签名,这样再发送给后台。

注意:这里只作为例子展示,如果需要用到签名,如何签名,是前台和后台沟通的结果!

axios请求拦截的用处远远不止这样,具体如何使用,还需要在实际工作,实际项目中随机应变啦。

总结

以上所述是小编给大家介绍的在Vue中使用axios请求拦截的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号