之前的文章《深入解析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教程
以上就是一文讲解vue中路由切换终止异步请求（附代码）的详细内容。