竞态问题 + axios 取消请求

目录

  • 1,问题描述
  • 2,解决
    • 1,丢弃错误的结果
    • 2,取消之前的请求
      • 在页面中使用
  • 3,其他
  • 4,潜在的问题

1,问题描述

在日常开发中,可能会有以下场景:

有多个 tab 页,每个 tab 是一个过滤条件,比如订单的状态:【已取消】,【待支付】,【已完成】。而 tab 对应的内容区域是同一个元素,显示列表。

问题:当快速切换 tab 时,如果保证拿到当前 tab 的数据?

比如当前 tab 是【已取消】,切换到【待支付】后快速切换到【已完成】,并且因为网络问题【已完成】的数据先回来,【待支付】的数据后回来,此时展示就出问题了。

这就是一个请求竟态问题

2,解决

1,丢弃错误的结果

通过标识符来保证,请求前和请求后的 id 相同。

import { ref } from "vue";
import { getArticleList } from "./api/apiList";let tabIndex = ref(0);
const changeTabIndex = (index) => {tabIndex.value = index;// 其他业务...getList();
};const getList = async () => {try {const curIndex = tabIndex.value;const data = await getArticleList();if (curIndex !== tabIndex.value) {return;}console.log("获取正确的数据");} catch (error) {console.log(error);}
};
// ./api/apiList
import axios from "./index";export const APIS = {GET_ARTICLE_LIST: "/api/list",
};
export const getArticleList = () => {return axios.get(APIS.GET_ARTICLE_LIST);
};

2,取消之前的请求

当切换新 tab 页时,之前的请求就没有必要继续了,为了提升效率,可以取消掉已经发送的请求。

而 axios 官方文档 有介绍如何取消发起的请求,代码很简单:

// 引入 axios 后,就会有这个构造函数。
const controller = new AbortController();axios.get("/foo/bar", {signal: controller.signal,}).then(function (response) {//...});
// 取消请求
controller.abort();

CancelToken 的方式,axios 在 v0.22.0 就已经弃用了,应该用上面的新方式。

这样的话,我们可以在请求拦截器中增加判断。

import axios from "axios";let needCancelRequests = {};// 添加请求拦截器
axios.interceptors.request.use(function (config) {const controller = new AbortController();config.signal = controller.signal;// 这里的标识符比较简单,可根据具体业务增加复杂性来保证唯一。needCancelRequests[config.url] = controller;return config;},function (error) {return Promise.reject(error);}
);// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 删除已完成的if (needCancelRequests[response.config.url]) {delete needCancelRequests[response.config.url]}return response;},function (error) {// 删除已完成的if (needCancelRequests[error.config.url]) {delete needCancelRequests[error.config.url]}if ((error.name = "CanceledError")) {console.log("已取消请求");}return Promise.reject(error);}
);export { needCancelRequests };
export default axios;

在页面中使用

以上面的例子来说,修改这个方法,在请求之前停掉上个 tab 页发起的请求:

import { needCancelRequests } from "./api/index";const changeTabIndex  = (index) => {if (needCancelRequests[APIS.GET_ARTICLE_LIST]) {needCancelRequests[APIS.GET_ARTICLE_LIST].abort();}tabIndex.value = index;getList();
};

3,其他

1,有了以上的逻辑,我们也可以做到切换页面(路由)时,取消上个页面还在请求中的请求。

具体实现:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {const controller = new AbortController();config.signal = controller.signal;// 这里增加更多的标识,到时在全局路由守卫中,循环过滤上个路由的所有请求,逐个取消即可。needCancelRequests[config.url] = {'controller': controller,router: 'xxx'};return config;},function (error) {return Promise.reject(error);}
);

4,潜在的问题

上面使用的 needCancelRequests[config.url] 作为标识符,但其实问题很大,上面只是介绍的最简单的情况。更复杂的情况如下:

  1. 多个接口的方法名相同,但请求方式不同
  2. config.url包括 query 参数的,所以在页面中手动取消时,就不能使用已经定义好的不带的 query 参数的 url 作为 key。就是这里:
const changeTabIndex  = (index) => {// APIS.GET_ARTICLE_LIST 并不带 query 参数,但在请求拦截器中的 key 却带着 query 参数。if (needCancelRequests[APIS.GET_ARTICLE_LIST]) {needCancelRequests[APIS.GET_ARTICLE_LIST].abort();}
};

所以,具体情况还需要具体分析。比如可以把方法名也拼上,或把自定义参数(应该定义一个字典保存)作为配置项传入,

export const getArticleList = () => {// get 请求的第2个参数就是配置项,在拦截器中可以取到。return axios.get(APIS.GET_ARTICLE_LIST, { a: 1123 });
};

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/813.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react 响应式栅格布局

遇到一个小问题 , 有很多的下拉框放在了一行的盒子里 用到了栅格思路 , 但响应式处理屏幕时候右侧的按钮会覆盖掉样式 之前我的思路是子绝父相 , 将按钮定在最右侧 , 按钮和下拉框都在同一盒子中 , 且做了栅格处理没想到还是会覆盖解决 : 后来我用到了 margin-left: auto 来让…

蓝桥杯 BASIC-25 基础练习 回形取数

蓝桥杯 BASIC-25 基础练习 回形取数 问题描述 回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过, 则左转90度。一开始位于矩阵左上角,方向向下。 输入格式 输入第一行是两个不超过200的正整数m, n,表示矩阵的行和列。 …

RedisHttpSession反序列化UID问题跟踪

1.RedisHttpSession配置 package com.visy.configure;import org.springframework.context.annotation.Configuration; import org.springframework.session.data.redis.config.annotation.web.http.EnableRedisHttpSession;Configuration EnableRedisHttpSession(maxInactive…

安卓手机APP开发__媒体开发部分__直播流

安卓手机APP开发__媒体开发部分__直播流 目录 概述 检查和监控直播的播放 在直播流中的定位查找 直播播放的用户界面 配置直播播放的参数 播放速度调整 定制播放速度的调整算法 直播窗口背后的异常和ERROR_CODE_BEHIND_LIVE_WINDOW 概述 ExoPlayer没有任何特殊配置的…

蓝桥杯2024年第十五届省赛真题-宝石组合

思路:参考博客,对Ha,Hb,Hc分别进行质因数分解会发现,S其实就等于Ha,Hb,Hc的最大公约数,不严谨推导过程如下(字丑勿喷): 找到此规律后,也不能枚举Ha&#xff…

OpenCV——Niblack局部阈值二值化方法

目录 一、Niblack算法1、算法概述2、参考文献二、代码实现三、结果展示OpenCV——Niblack局部阈值二值化方法由CSDN点云侠原创,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、Niblack算法 1、算法概述 Niblack 算法是一种典型的局部阈值…

JavaWeb开发05-事务管理-AOP概述-AOP通知类型-通知顺序-切入点表达式-连接点-案例

一、事务管理 1.事务回顾 2.Spring事务管理 删除部门和删除部门下的员工应该绑定在一起,但是如果这两个操作之间出现错误,就会执行删除部门不删除员工,所以需要使用事务将两个任务绑定在一起,要么一起成功要么一起失败 Spring中如…

如何通过自动化采购管理软件解决 6 个采购挑战?

采购需要精确性、可预测性以及敏捷而自信地解决问题的能力。灵活采购流程可以帮助企业更快地适应市场变化和供应链中断。 借助正确的工具,团队可以实现这些目标。 采用流程自动化技术的主要好处 当被问及采用流程自动化工具带来的好处时,三分之二的高…

基础知识集合

https://blog.csdn.net/sheng_q/category_10901984.html?spm1001.2014.3001.5482 epoll 事件驱动的I/O模型,同时处理大量的文件描述符 内核与用户空间共享一个事件表:监控的文件描述符以它们的状态,当状态变化,内核将事件通知给…

2024年二级造价师(建设工程造价管理)考试题库及答案

一、选择题 6.关于工程量清单方式招标的工程合同价格风险及风险分担,下列说法中正确的是(  )。 A.人工费变化发生的风险全部由发包人承担 B.承包人管理费的风险一般由发承包双方共同承担 C.当出现的风险内容及幅度在招标文件规定的范围…

Docker(十):Redis三主三从(扩容、缩容)

一:启动6台Redis # privilegedtrue 获取宿主机root权限 # --cluster-enabled yes 开启redis集群 # --appendonly yes 开启持久化 docker run -d --name redis-node-1 --net host --privilegedtrue -v /data/redis/share/redis-node-1:/dataredis:6.0.8--cluster-en…

Mac上Maven的安装和环境变量配置保姆级教程(最新版实时更新)

目录 一、Maven的安装 1.进入官网(Maven官网)下载安装包并解压 2.这里我使用了Homebrew安装Maven 安装Homebrew: 安装Maven: 二、Maven配置环境变量 1.打开环境变量文档: 2.在弹出文档结尾加入配置&#xff1a…

SpringBoot常用20个注解及其作用

1、SpringBootApplication: 这是一个组合注解,包括了Configuration、EnableAutoConfiguration 和 ComponentScan。它标识了一个主程序类,用于启动 Spring Boot 应用。 2、RestController: 这个注解用于标识一个类,表示这个类中的所有方…

【Node.js】 fs模块全解析

🔥【Node.js】 fs模块全解析 📢 引言 在Node.js开发中,fs模块犹如一把万能钥匙,解锁着整个文件系统的操作。从读取文件、写入文件、检查状态到目录管理,无所不能。接下来,我们将逐一揭开fs模块中最常用的那…

Spring Boot 加载本地 JAR 包的技术实践

随着微服务架构的兴起,Spring Boot 因其快速构建、易于部署的特性,成为了众多开发者的首选框架。在开发过程中,我们有时需要引入一些不在公共 Maven 仓库中的 JAR 包作为依赖,这时候就需要加载本地的 JAR 包。本文将详细介绍在 Sp…

【HC32L110】华大低功耗单片机启动文件详解

本文主要记录华大低功耗单片机 HC32L110 的 汇编启动过程,包括startup_hc32l110启动文件详细注释 目录 1.启动文件的作用2.堆栈定义2.1 栈2.2堆 3.向量表4.复位程序5.中断服务程序6.堆栈初始化启动过程详解7.1从0地址开始7.2在Reset_Handler中干了啥? 8.…

PyTorch|保存及加载模型、nn.Sequential、ModuleList和ModuleDict

系列文章目录 PyTorch|Dataset与DataLoader使用、构建自定义数据集 PyTorch|搭建分类网络实例、nn.Module源码学习 pytorch|autograd使用、训练模型 文章目录 系列文章目录一、保存及加载模型(一)保存及加载模型的权重(二)保存及…

Rust 语言中的跨平台 GUI 库

在 Rust 社区中,Iced 是值得关注的跨平台 GUI (图形用户界面) 库之一。由 iced-rs 团队开发,Iced的设计灵感来源于 Elm 语言,它以简洁性和类型安全性为特色,旨在提供一个简单易用且功能丰富的 GUI 开发体验。本文将深入探讨 Iced&…

探究欧拉恒等式的美学与数学威力

正如老子所述,“道生一,一生二,二生三,三生万物”,数学作为人类认知自然法则的语言,其数系的不断发展象征着对世界理解的深化。从自然数经由分数、无理数至复数,复数虽看似反直觉,却…

MATLAB实现蚁群算法优化柔性车间调度(ACO-fjsp)

蚁群算法优化车间调度的步骤可以分为以下几个主要阶段: 1.初始化阶段: 设置算法参数,如信息素浓度、启发式因子等。这些参数将影响蚂蚁在选择路径时的决策过程。 确定车间调度的具体问题规模,包括工件数量、机器数量以及每个工件…