【JS】Axios取消未完成请求解决Tab频繁切换数据问题

最新推荐文章于 2025-11-03 18:21:09 发布
原创 最新推荐文章于 2025-11-03 18:21:09 发布 · 3.7k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#axios #取消请求 #CancelToken #性能优化

一、场景描述 

 Tab切换频率较低、数据返回速度理想的情况下，几乎不用考虑这个问题。切换频率高如果不处理未完成的请求不仅会严重影响页面性能，由于浏览器并发请求限制，也可能会造成后续请求超时。另外一个较为直观的业务影响是，频繁切换也会造成数据渲染错误，如下图：当前已切换到待付款，但是渲染的数据是前面请求的已完成的数据。

二、解决方案原理：

 利用 Javascript XMLHttpRequest 对象上的 abort 方法，终止已发出的请求。MDN上关于此方法的解释：当一个请求被终止，它的  readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。

而我们业务里的场景，需要在发出请求时，收集请求集合，存储一个cancel函数。然后在请求前遍历这个集合并调用cancel函数，取消在此之前的所有请求。

三、axios CancelToken用法

那么在axios中怎么中止http请求？先上axios官方文档的用法。Tips：可以使用同一个 cancel token 取消多个请求。

可以使用 CancelToken.source 工厂方法创建 cancel

最低0.47元/天 解锁文章
Tab切换过快导致数据紊乱
wang_fu_gui_ya的博客
09-19 1620
这是一个典型左侧切换tab，右侧内容区根据tab切换刷新请求数据，当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱。当我们试用queueRequest 函数连续调取接口时，第一个接口完成才回去执行第二个接口，但是bug依在。网上还有一种方法就是要修改底层axios去解决，这种方法不顺我心，所以没去做。最后解决方法还是我把问题想的太复杂了，在接口函数中增加tab的校准再赋值。初步解决以为是第二个接口比第一个快导致，所以我写了一个任务队列。
vue小技巧:性能优化使用篇 =＞ 路由/tab切换取消当前页面异步请求
weixin_44395929的博客
04-15 3068
//tab在前端是非常常见的一个组件, 在vue里面, 结合了双向绑定原理, 更是将页面无感刷新提升到了极致 //假设每个tab选项都需要请求一次接口(做一次异步操作) //但是假如我们有一个手速超快的人(我摊牌了, 就是我), 他在一秒钟内能切换3次tab选项, 也就是请求了三次接口, 然后他又生活在山旮旯里面, 网络请求要3 秒后才能返回结果, 他脾气不好, 来回点了9次, 才会有第一个请求的数据返回 试问如何保证返回的数据是最后一次切换后的数据 一、防抖 //不多做介绍, 防抖从原理和可行性上分析,
【axios取消请求】如何在token过期后取消未响应的请求
weixin_61241731的博客
04-24 566
我们在实际项目中通常会遇到登录过期后会跳登录页的情况，回跳过程会根据接口请求的状态码判断是否登陆状态过期，并给出用户提示，如果此时存在多个请求接口同时调用，就会同时报出多个登录过期的提示，如何避免多个提示同时报出的情况呢？那我们就需要用到取消接口请求的功能。我们基于axios提供的AbortController对象（fetch提供的原生API)来实现这一功能。
前端Tabs切换导致的数据问题
最新发布
hole_diss的博客
11-03 446
本文介绍了四种解决tabs切换导致数据请求问题的方案：1）使用唯一标识验证请求有效性；2）采用防抖机制降低请求频率；3）在组件卸载时取消未完成请求；4）通过Map缓存各tab数据避免重复请求。每种方案均提供React代码示例，涵盖请求标识验证、防抖处理、组件生命周期控制和数据缓存等关键技术点。这些方法能有效处理tabs切换时的数据请求异常，解决请求竞争和重复加载问题。
微信小程序 解决tab页切换过快 数据出错问题
IT_iosers的博客
11-14 1049
具体问题：切换tab页切换过快时,上一个列表接口未响应完和当前列表数据冲突 出现数据错误。解决方式：原理 通过判断。
JavaScript 中如何取消请求
cxz
07-27 3970
众所周知，JavaScript实现异步请求就靠浏览器提供的两个API——XMLHttpRequest和Fetch。我们平常用的较多的是Promise请求库axios，它基于XMLHttpRequest。
Vue切换页面时中断axios请求
m0_37437840的博客
07-11 1421
Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。
vue axios请求频繁时取消上一次请求的方法
10-17
为了解决这个问题，我们可以使用axios库提供的取消请求功能，来取消那些不再需要的请求。 Vue中使用axios取消请求主要涉及到axios的CancelToken功能。CancelToken本质上是一个信号机制，能够让我们取消一个还未完成...
vue路由切换时取消之前的所有请求操作
10-14
在Vue.js应用中，路由切换是常见的操作，但有时我们希望在用户切换路由时取消之前正在进行的网络请求，以避免不必要数据的加载或者错误的数据处理。本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 ...
tab1到tab2频繁切换会有到2还显示1的数据，为什么会发生，怎么解决
06-27
每当Tab发生变化时，清理掉前一个Tab相关的所有异步操作，比如取消未完成的HTTP请求，清除定时器等，以避免它们影响到新的Tab内容。 ```javascript // 在Vue生命周期钩子beforeDestroy中取消挂起的请求 ...
前端切换按钮请求接口，第一个接口还没有请求返回数据，就切换新的按钮发起新的请求。结构第一个请求慢的接口数据会在第二个请求后返回覆盖第二个接口请求返回的数据，怎么解决
04-19
| 请求中断 | 频繁切换场景 | 减少无效请求 | 需要处理取消异常 | | 请求标识验证 | 简单切换场景 | 实现简单 | 无法减少网络流量 | | 数据隔离 | 固定数量tab | 数据独立安全 | 增加内存消耗 | | 组合方案（推荐） ...
项目中的优化-tab页频繁切换，页面数据混乱
qq_38133850的博客
12-11 1204
最近在项目中，遇到这种情况，频繁切换tab后，之前tab页面请求回来的数据，会渲染到当前页面，导致页面数据会来回的变化。
简单易懂：Axios 如何取消请求的两种方法
热门推荐
LiamHong_的博客
12-06 1万+
通过使用Axios提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例。
axios拦截上一次请求响应的数据，解决tab切换太快至列表数据错乱
weixin_44779945的博客
04-29 1657
axios 封装 首先引入axios 创建实例 import axios from 'axios' // 创建axios实例 const instance= axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 6000 // 请求超时时间 }) 然后加入axios的拦截器 instance.in...
vue 切换tab之前取消已经发送的接口请求
dt517311的博客
07-03 1204
切换tab太快，导致tab与请求数据显示不一致。因业务需求，仅对某个接口进行处理。
切换路由时如何关闭上一个页面的所有请求-axios cancelToken
hellolipop
11-25 2465
是什么偷走了我的网速 在项目中经常会遇到一个页面中存在很多的请求，这时候如果切换页面没有处理的话请求依然会存在 这是非常影响性能的一件事，特别是在网络情况不好的情况下，这只会让用户的网络体现的更慢。往往这时候我们不会再去等待页面慢慢的加载，这时候只会切换一个页面或者不停的刷新。 解决方法 那么我们改如何解决这个问题呢？理论很简单，在切换到下一个页面之前取消之前的请求就可以了。那么我们怎么操作呢？ 首先在axios的配置文件中加入以下代码 其中最重要的就是下图所示的这部分代码： 挂载方式全凭你的个
取消请求（一：点击取消按钮，发送请求取消；二：点击发送请求，连续点击发送相同的请求或者点击发送请求未完成又去点击另一个请求，前一个请求自动取消；三：取消请求中如何使用拦截器）
JEFF_xieyuzhi的博客
11-29 1786
点击取消按钮，发送请求取消： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
axios 中如何取消请求_从不会使用到精通原理_番茄出品
lazy_tomato的博客
02-24 7684
github-axios 点击跳转我去年阅读 源码的时候，默认版本还是 ，今年变成了 了，这个需要注意下。我对 版本号比较在意的原因是，看到过这句话： 整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。由上述的截图可得，目前最新的 的取消请求api，推荐使用 。旧版本的 在 后弃用。官方示例 1.3.2 AbortController 2. CancelToken 使用案例 官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。 2.2 后端服务代码 2.3 启
axios切换页面时取消当前页面的http请求
An滴饭儿的博客
11-11 385
一、全局加 1、axios封装文件 2、拦截器请求头 3、错误处理 4、在路由守卫处加上取消请求 二、也可以在单个组件中加
vue3结合axios 如何处理切换路由时中断未完成的请求
05-25
### Vue3 中使用 Axios 在路由切换时取消未完成的请求 在 Vue3 的开发过程中，当用户快速切换页面时可能会遇到多个并发请求的问题。如果这些请求中的某些尚未完成，则可能导致不必要的资源消耗或者数据冲突。为了应对这种情况，在 Axios 提供的功能基础上，可以利用 `CancelToken` 来实现对未完成请求的管理。 以下是具体实现方式： #### 使用 CancelToken 取消请求 Axios 支持通过 `CancelToken` 实现请求的取消功能。可以在每次发送新请求之前先取消之前的请求实例[^1]。下面是一个完整的解决方案示例： ```javascript import axios from 'axios'; import { onBeforeUnmount, ref } from 'vue'; import { useRoute, useRouter } from 'vue-router'; export default { setup() { const source = axios.CancelToken.source(); const isCancelled = ref(false); const fetchData = async () => { try { const response = await axios.get('/api/data', { cancelToken: source.token, }); if (!isCancelled.value) { console.log(response.data); } } catch (error) { if (axios.isCancel(error)) { console.warn('Request canceled:', error.message); } else { throw error; } } }; const route = useRoute(); const router = useRouter(); // 当前路由变化时触发 router.beforeEach((to, from) => { if (source) { source.cancel('Operation canceled due to navigation.'); isCancelled.value = true; // 设置标志位防止旧数据被处理 } return true; }); onBeforeUnmount(() => { if (source) { source.cancel('Component unmounted'); } }); fetchData(); // 初始加载数据 return {}; }, }; ``` 在这个例子中，我们创建了一个全局可用的 `CancelToken` 对象，并将其绑定到每个请求上。每当检测到路由发生变化或组件卸载时，都会调用 `cancel()` 方法来终止正在进行的操作并释放内存占用[^1]。 另外需要注意的是，对于 Promise 链条来说，一旦某个中间环节抛出了异常（比如这里手动引发的取消事件），整个链条就会进入 rejected 状态而不会继续执行后续逻辑[^2]。因此我们在捕获错误之后还需要额外判断是否是因为主动取消引起的特殊情形以便做出适当反应。 最后提醒一点，虽然上面演示了如何基于 Vue Router 进行动态监听从而达到目的，但在实际项目里可能还会涉及到更多复杂场景下的需求调整——例如区分不同类型的 API 调用分别设置独立控制机制等等。 #### 总结 综上所述，借助于 Axios 自带的 `CancelToken` 功能以及 Vue Composition API 和 Vue Router 的配合，能够有效解决因频繁跳转造成的遗留挂起请求问题，提升应用性能表现的同时也增强了用户体验流畅度。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值