之前的文章《深入解析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中路由切换终止异步请求(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

Vue.js和React各有优缺点,选择时需综合考虑团队技能、项目规模和性能需求。1)Vue.js适合快速开发和小型项目,学习曲线低,但深层嵌套对象可能导致性能问题。2)React适用于大型和复杂应用,生态系统丰富,但频繁更新可能导致性能瓶颈。

Vue.js适合小型到中型项目,React适合大型项目和复杂应用场景。1)Vue.js易于上手,适用于快速原型开发和小型应用。2)React在处理复杂状态管理和性能优化方面更有优势,适合大型项目。

Vue.js和React各有优势:Vue.js适用于小型应用和快速开发,React适合大型应用和复杂状态管理。1.Vue.js通过响应式系统实现自动更新,适用于小型应用。2.React使用虚拟DOM和diff算法,适合大型和复杂应用。选择框架时需考虑项目需求和团队技术栈。

Vue.js和React各有优势,选择应基于项目需求和团队技术栈。1.Vue.js社区友好,提供丰富学习资源,生态系统包括VueRouter等官方工具,支持由官方团队和社区提供。2.React社区偏向企业应用,生态系统强大,支持由Facebook及其社区提供,更新频繁。

Netflix使用React来提升用户体验。1)React的组件化特性帮助Netflix将复杂UI拆分成可管理模块。2)虚拟DOM优化了UI更新,提高了性能。3)结合Redux和GraphQL,Netflix高效管理应用状态和数据流动。

Vue.js是前端框架,后端框架用于处理服务器端逻辑。1)Vue.js专注于构建用户界面,通过组件化和响应式数据绑定简化开发。2)后端框架如Express、Django处理HTTP请求、数据库操作和业务逻辑,运行在服务器上。

Vue.js与前端技术栈紧密集成,提升开发效率和用户体验。1)构建工具:与Webpack、Rollup集成,实现模块化开发。2)状态管理:与Vuex集成,管理复杂应用状态。3)路由:与VueRouter集成,实现单页面应用路由。4)CSS预处理器:支持Sass、Less,提升样式开发效率。

Netflix选择React来构建其用户界面,因为React的组件化设计和虚拟DOM机制能够高效处理复杂界面和频繁更新。1)组件化设计让Netflix将界面分解成可管理的小组件,提高了开发效率和代码可维护性。2)虚拟DOM机制通过最小化DOM操作,确保了Netflix用户界面的流畅性和高性能。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载
最流行的的开源编辑器

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

禅工作室 13.0.1
功能强大的PHP集成开发环境

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能