当前位置:   article > 正文

vue-resource中设置全局拦截器遇到的两个问题_vue ressuccess响应拦截器两个错误警告

vue ressuccess响应拦截器两个错误警告

1、vue项目,在main.js中设置了vue-resource的全局拦截器;某一页面采用定时器实现长连接,项目需求是获取当前页面的请求,在离开页面时将请求清除;因为要将请求存储到stroe中,所以需要在拦截器中使用对应组件的this,但使用时却发现,获取到的this并不是对应的组件实例;最终采用了在VUE的原型上定义函数,并在拦截器中调用该函数,这样就能正确获取到this,实现方式如下

  1. let vm = new Vue({
  2. router,
  3. store,
  4. i18n,
  5. render: h => h(App)
  6. }).$mount('#app');
  7. Vue.prototype.pushRequest = function (request) {
  8. // console.log(this);此处this为请求所在页面的Vue实例
  9. this.$store.commit('updateRequest',request);
  10. };
  11. Vue.http.interceptors.push((request, next) => {
  12. //console.log(this)//此处this获取不到请求所在页面的Vue实例
  13. if(request.url === 'api/v2.0/monitor/data'){
  14. vm.pushRequest(request);
  15. }
  16. let timeout ;
  17. if(request._timeout){
  18. timeout = setTimeout(()=>{
  19. if(request.onTimeout){
  20. request.onTimeout(request);
  21. request.abort();
  22. }
  23. },request._timeout);
  24. }
  25. next((response) => {
  26. clearTimeout(timeout);
  27. return response;
  28. });
  29. });

ps:尝试过在对应的组件里设置请求拦截器,本来想设置‘局部拦截器’,在‘局部拦截器’中获取能获取到当前组件的this,后发现这样会导致组件实例一直存在:每进入一次该页面,就会生成一个新的组件实例,并且旧的实例不会被清除,而且两个组件都会发出同样的请求;猜测可能拦截器只能设置全局拦截器,所谓的‘局部拦截器’是不行的,遂放弃

2、上面的代码中,除了对特定请求做拦截处理外,还有一个对请求超时做处理的功能;页面长连接服务器端设置的超时时间为3分钟,但是在chrome浏览器中发现,请求超时未两分钟时浏览器就会报错,因此加上自定义的超时处理,设置超时时间,到点清除该请求,进入下一次请求,如上设置后,需要在请求发起处设置超时时间和超时处理函数:

  1. context.$http.post('api/v2.0/monitor/data',info,{_timeout:118000,onTimeout:(request)=>{console.log('超时')},
  2. }).then(function (res) {
  3. },function(err){
  4. if(context.$route.path==='/monitor'){
  5. context.timeout1 = setTimeout(that._getMonData1(context,info),5000);
  6. }else{
  7. context.timeout1 ='';
  8. }
  9. })
做超时处理后,当前请求停止,执行 err函数,判断是否在长连接页面,是则发出下一次请求;


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/610947
推荐阅读
相关标签
  

闽ICP备14008679号