Vue+axios 使用CancelToken多次发送请求取消前面所有正在pendding的请求

news2024/12/29 0:29:28

需求:

项目中 折线图数据是循环调用的,此时勾选一个设备, 会出现多条线。

原因

折线图数据一进来接口循环在调用,勾选设备时,循环调用的接口有的处于pedding状态 ,有的还在加载中,这就导致勾选设备时,页面渲染数据不及时,数据错乱的问题
在这里插入图片描述
在这里插入图片描述

勾选设备后出现 错误展示

出现多条线
在这里插入图片描述

在这里插入图片描述

正确展示

在这里插入图片描述

在这里插入图片描述
选择设备之后,将之前循环调用的接口,处于pendding状态的取消掉重新发送请求
在这里插入图片描述

完整代码

在这里插入图片描述

1.在 request.js,拦截器里 加上 取消功能
在这里插入图片描述
再编写一个取消方法
**加粗样式**

let source = axios.CancelToken.source()
// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    var lang = localStorage.getItem('lang')
    if (!lang) {
      lang = 'zh_CN'
    }
    config.headers['Accept-Language'] = lang.replace(/_/g, '-')
    config.headers['Content-Type'] = 'application/json'
    config.cancelToken = source.token
    return config
  },
  error => {
    Promise.reject(error)
  }
)
export function cancelAllReq() {
  console.log('取消所有挂起状态的请求');
  source.cancel('取消所有挂起状态的请求');

  source = axios.CancelToken.source()
  // 创建axios实例
  service = axios.create({
    baseURL: BASE_API,
    timeout: Config.timeout // 请求超时时间
  })
}

页面中使用

在这里插入图片描述

<el-select multiple v-model="cids" clearable :placeholder="$t('NeoLight.allDe')" @change="getSearch()">
                        <el-option v-for="item in storageOptions" :key="item.cid" :label="item.name" :value="item.cid">
                        </el-option>
                    </el-select>
import { cancelAllReq } from '@/utils/request'
methods(){
 // 下拉列表触发查询接口
        getSearch() {
            cancelAllReq()//调用取消方法
            this.getList()//折线图方法
            this.getTableList();//表格方法
        },
 }       

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

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

相关文章

安泰电子:ATA-ML100水声功率放大器模块技术参数

随着人类对海洋的深度探索和利用的不断加深&#xff0c;水下通信技术日益成为研究的热点。水下通信技术是指在海洋、湖泊等水体中实现信息传递和交流的技术手段。它不仅在海洋资源勘探、海洋环境监测等领域具有广泛应用&#xff0c;还在水下考古、水下工程等领域发挥着重要作用…

018 - STM32学习笔记 - SPI读写FLASH(三)- 写入字符串、小数与整数

018 - STM32学习笔记 - SPI访问Flash&#xff08;三&#xff09;- 写入字符串、小数与整数 上节对Flash的跨页写入数据进行了完善&#xff0c;但是数据写入都是以Byte数组的方式进行写入&#xff0c;这节分别进行字符串的写入和小数整数的写入&#xff0c;本节内容对SPI的函数…

linux之Ubuntu系列(四)用户管理 用户和权限 chmod 超级用户root, R、W、X、T、S 软链接和硬链接

r(Read&#xff0c;读取)&#xff1a;对文件而言&#xff0c;具有读取文件内容的权限&#xff1b;对目录来说&#xff0c;具有浏览目 录的权限。 w(Write,写入)&#xff1a;对文件而言&#xff0c;具有新增、修改文件内容的权限&#xff1b;对目录来说&#xff0c;具有删除、移…

Burp Suite---渗透测试工具

文章目录 Burp SuiteBurp Suite入门设置代理HTTP的代理 Proxy&#xff08;代理&#xff09; Burp Suite 是一款集成化的渗透测试工具&#xff0c;包含了很多功能&#xff0c;可以帮助我们高效地完成对Web应用程序的渗透测试和攻击。 Burp Suite由Java语言编写&#xff0c;基于…

十大网络安全上市公司分析,让我们重点聊聊F5

网络安全上市厂商业务广泛分布于网络安全硬件、软件&#xff0c;网络安全服务等板块&#xff0c;总体来看&#xff0c;十大网络安全上市公司的竞争可谓是如火如荼。今天让我们把目光集中在F5&#xff0c;这个能为我们所有人创造更安全的数字世界的企业&#xff0c;在应用及API交…

PuTTY下载(免安装exe)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

手写数字识别Minst(CNN)

文章目录 手写数字识别网络结构加载数据集数据集可视化CNN网络结构训练模型保存模型和加载模型测试模型 手写数字识别 网络结构 网上给出的基本网络结构&#xff1a; 然而在本数据集中&#xff0c;输入图不是1*32*32&#xff0c;是1*28*28。所以正确的网络结构应该是 level…

实现关注公众号以后自动推送小程序

准备好小程序的APPID和跳转路径 然后一行代码搞定&#xff1a; <a data-miniprogram-appid"小程序APPID" data-miniprogram-path"跳转路径">点我跳转到小程序</a>

Shuffle简单理解

map的结果本身是无序的&#xff0c;但是map输出的结果有序 mapper和reduce是不同的机器&#xff0c;进行了网络传输&#xff0c;所以存在数据拷贝 第二次排序&#xff0c;是将每个reduce对应的task进行排序&#xff0c;然后再进入reduce maptask运行结束&#xff0c;每个mask块…

被字节拷打了~基础还是太重要了...

今天分享一篇一位同学去字节面试的实习面经&#xff0c;技术栈是java&#xff0c;投了go后端岗位&#xff0c;主要拷打了 redismysql网络系统java算法&#xff0c;面试问题主要集中在 mysql、redis、网络这三部门&#xff0c;因为面试官是搞 go 的&#xff0c;java 只是随便问了…

55 # 实现可写流

先在 LinkedList.js 给链表添加一个移除方法 class Node {constructor(element, next) {this.element element;this.next next;} }class LinkedList {constructor() {this.head null; // 链表的头this.size 0; // 链表长度}// 可以直接在尾部添加内容&#xff0c;或者根据…

数据库小白看这里,这个Oracle数据库知识图谱你值得拥有

2022年前后&#xff0c;墨天轮社区曾陆续推出PostgreSQL知识图谱、MySQL知识图谱&#xff0c;并得到了大家的广泛好评。此后&#xff0c;便有众多朋友对Oracle知识图谱发起不断“催更“。经过近期的内容搜集整合、专家复审与打磨&#xff0c;墨天轮社区正式推出Oracle知识图谱&…

MySQL五种约束类型(普通 /自增主键,外键等) + 进阶查询(聚合查询,内 /外连接查询,自连接查询,子查询,合并查询)

文章目录 前言一、五种约束NOT NULL 约束UNIQUE 约束DEFAULT 约束PRIMARY KEY 主键约束(重点)普通主键自增主键 FOREIGN KEY 外键约束(重点) 二、进阶查询聚合查询聚合函数GROUP BY子句HAVING 联合查询笛卡尔积内连接外连接自连接子查询单行子查询&#xff1a;返回一行记录的子…

AI时代图像安全“黑科技”如何助力人工智能与科技发展?

〇、前言 7月7日下午&#xff0c;2023世界人工智能大会&#xff08;WAIC&#xff09;“聚焦大模型时代AIGC新浪潮—可信AI”论坛在上海世博中心红厅举行。人工智能等技术前沿领域的著名专家与学者、投资人和领军创业者汇聚一堂&#xff0c;共同探索中国科技创新的驱动力量。 在…

搭载下一代人工智能技术,微软推出Power Automate流程挖掘产品

在近日的Microsoft Inspire大会中&#xff0c;微软揭晓了他们即将推出的Power Automate流程挖掘产品&#xff0c;并计划在8月1日正式对外开放。 试用地址&#xff1a;https://powerautomate.microsoft.com/zh-cn/#home-signup 这款产品搭载了下一代人工智能技术&#xff0c;有…

好用的思维导图软件有哪些?这几款简单好用

好用的思维导图软件有哪些&#xff1f;思维导图是一种非常有用的思维工具&#xff0c;可以帮助我们组织和理清复杂的信息。在如今的数字时代&#xff0c;有很多软件可以帮助我们创建和编辑思维导图。下面介绍几款简单好用的思维导图软件。 第一款&#xff1a;迅捷画图 这是一款…

多个信贷范围时客户主数据界面的定制(套头和信用缴纳范围=信贷范围)

客户主数据-销售范围-开票的界面有信贷范围&#xff0c;叫贷方控制范围。 但是默认是看不到的。需要进行配置。 但是SAP的配置里面的名字很奇怪&#xff0c;在客户账户组里面的销售数据中(OVT0)定制 双击后处理的这个界面&#xff0c;和界面的“”开票凭证“”对不上&#x…

云原生微服务应用的平台工程实践

作者&#xff1a;纳海 01 微服务应用云原生化 微服务是一个广泛使用的应用架构&#xff0c;而如何使得微服务应用云原生化却是近些年一直在演进的课题。国内外云厂商对云原生概念的诠释大同小异&#xff0c;基本都会遵循 CNCF 基金会的定义&#xff1a; 云原生技术有利于各组…

Linux内核源代码的目录结构包括部分:

内核核心代码&#xff1a;这部分代码包括内核的各个子系统和模块&#xff0c;如进程管理、内存管理、文件系统、网络协议栈等。这些代码构成了Linux内核的核心功能。 非核心代码&#xff1a;除了核心代码之外&#xff0c;还包括一些非核心的代码和文件&#xff0c;如库文件、固…

【网站搭建】1安装Hexo

1.前期准备工作 安装node.js和git Node.js (nodejs.org) Git - Downloads (git-scm.com) 安装好后验证是否完成安装 2.打开Git安装配置Hexo 由于国内的镜像源速度较慢&#xff0c;所以我们利用 npm 来安装 cnpm &#xff0c;在命令行中输入npm install -g cnpm --registry…