VUE路由切换终止异步请求

邱秋1年前 19:51

问题:

在SPA模式开发当中,比如VUE ,当前路由切换的时候如何终止正在发生的异步请求呢,

结果:

假如请求超时并且有设定超时时间。有一堆的异步请求在执行,当用户切换到另一个页面,这些请求还未终止,并且当服务器响应之后,反馈的结果不是当前页面所期待的。最终会误导用户造成一些不必要的结果。也给web 造成性能问题。

解决方案:

把执行的请求存入队列,当路由切换的时候终止队列里的异步请求。

首先搞一棵树来存储请求队列

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
   state:{
        requests:[]
   }
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App),
  store
})

利用ajax请求和终止

var xhr = $.ajax({type:'POST',
    url:'xxxsx',
    data:'',
    success:function(){
        alert('ok');
    }
})
//xhr.abort()  终止请求
this.$store.state.requests.push(xhr)

利用superagent请求 和终止

const request = require('superagent')
var xhr = request('post','/api/xxxx/xxxx')
xhr.send(data)
//xhr.query(data) //get 传参
xhr.end((err,res)=>{
    ...todo...
})
//xhr.abort() 终止请求
this.$store.state.requests.push(xhr)

利用axios 请求

import axios from 'axios'
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/api/xxxxx/xxxxx', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求(message 参数是可选的)
//source.cancel('Operation canceled by the user.');

this.$store.state.requests.push(source)

利用vue-resource请求

import Vue from 'vue'
import req from 'vue-resource'
Vue.use(req)

this.$http.get('/someUrl', {    
    before(request) {
        this.$store.state.requests.push(request)
        //request.abort(); 终止请求
    }
  }).then(response => {
    // success callback
  }, response => {
    // error callback
  });

利用fetch 请求

fetch 貌似无法监控读取进度和终端请求,他没有timeout机制,没有progress提示,但是可以利用Promise 来实现终止

var _fetch = (function(fetch){
  return function(url,options){
    var abort = null;
    var abort_promise = new Promise((resolve, reject)=>{
      abort = () => {
        reject('abort.');
        console.info('abort done.');
      };
    });
    var promise = Promise.race([
      fetch(url,options),
      abort_promise
    ]);
    promise.abort = abort;
    return promise;
  };
})(fetch);

var xhr = _fetch('/api/xxx/xxxx',{methods:'POST',body:data});
xhr.then(function(res) {
    console.log('response:', res);
}, function(e) {
    console.log('error:', e);
});
xhr.abort(); //终止

this.$store.state.requests.push(xhr)

那么知道如何终止请求,然后也存储了请求实例,剩下的只要监听路由就行了

let router = new Router({....})
//每次路由改变之前终止所有的请求实例
router.beforeEach(function (to, from, next) {
    this.$store.state.requests.forEach(xhr=>xhr.abort()) //终止所有的请求实例
    this.$store.state.requests =[] //执行完清空,等待下一次的页面的请求装载
    next()
})

这种只是假设,自然请求完成之后最好,还是手动释放树的请求示例。例如ajax 请求完成之后 在complite 里面 splice store里面的实例。

[完]

本文于1年前 19:51发布在code分类下,当前已被围观3618次

相关标签:vue,javascript,

永久地址:https://www.chuchur.com/article/vue-router-request-abort

版权声明: 自由转载-署名-非商业性使用

lwMac OSChrome67中国 杭州 电信#20
请问abort()只能终止/someURL这个请求吗,还是说加入不管之前请求是不是这个都可以终止
lxnWindowsFirefox63火星#33
您好,你的这种写法是每个请求里面都要这么写吗
匿名用户