一文讲解Vue中路由切换终止异步请求（附代码）

之前的文章《深入解析js中实现队列（代码分享）》中，给大家了解了js中实现队列。下面本篇文章给大家了解Vue中路由切换终止异步请求，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。

问题：

在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里面的实例。

[完]

推荐学习：vue.js教程