Axios使用CancelToken取消重复请求

处理重复请求:没有响应完成的请求,再去请求一个相同的请求,会把之前的请求取消掉
在这里插入图片描述
新增一个cancelRequest.js文件

import axios from "axios"
const cancelTokens = {}export const addPending = (config) => {const requestKey = getRequestKey(config)if (cancelTokens[requestKey]) {cancelTokens[requestKey].cancel('cancel request')}const source = axios.CancelToken.source()cancelTokens[requestKey] = sourceconfig.cancelToken = source.token
}export const deletePending = (res) => {const requestKey = getRequestKey(res.config)if (cancelTokens[requestKey]) {delete cancelTokens[requestKey]}
}const getRequestKey = (config = {}) => {return config.url + config.method + JSON.stringify(config.params, config.data)
}

request.js

import axios from "axios"
import { baseUrl } from "@/config"
import { addPending, deletePending } from "./cancelRequest"
const service = axios.create({baseURL: baseUrl,timeout: 100000,
})
service.interceptors.request.use(config => {addPending(config)return config},error => {return Promise.error(error)}
)service.interceptors.response.use(success => {deletePending(success)},error => {deletePending(error)}
)export default service

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

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

相关文章

如何区分闰年与平年

首先要明白 地球绕太阳运行周期为365天5小时48分46秒(合365.24219天),即一回归年(tropical year)。公历的平年只有365日,比回归年短约0.2422 日,每四年累积约一天,把这一天加于2月末…

Docker安装基础使用练习

目录 1、安装Docker-CE 1)简单使用yum方式安装 ! 2)配置镜像加速: 2、下载系统镜像(Ubuntu、 centos) 1)先查看我们所需的镜像有哪些版本。使用search命令! 2)下载镜像使用的是pul…

【爬虫】P1 对目标网站的背景调研(robot.txt,advanced_search,builtwith,whois)

对目标网站的背景调研 检查 robot.txt估算网站大小识别网站所用技术寻找网站的所有者 检查 robot.txt 目的: 大多数的网站都会包含 robot.txt 文件。该文件用于指出使用爬虫爬取网站时有哪些限制。而我们通过读 robot.txt 文件,亦可以最小化爬虫被封禁的…

vue中实现文字检索时候将搜索内容标红

实现结果 html&#xff1a; <div class"searchBox"><span class"bt">标&#8195&#8195题</span><div class"search"><div class"shuru"><!-- <span class"title">生产经营<…

如何批量修改图片名为不同名称

如何批量修改图片名为不同名称&#xff1f;当今社会&#xff0c;因为人们都养成了随手拍照的习惯&#xff0c;所以拥有上千上万张照片的相册已经司空见惯不足为奇。然而&#xff0c;我们在保存这些照片时往往都会碰到一个大难题——电脑中的图片名称千奇百怪&#xff0c;让整个…

完美解决微信小程序使用复选框van-checkbox无法选中

由于小程序使用了vant-ui框架&#xff0c;导致checkbox点击无法选中问题 <van-checkbox value"{{ checked }}" shape"square"><view class"check-content"><view class"checktext">我已阅读并同意>《用户协议》…

opencv-目标追踪

import argparse import time import cv2 import numpy as np# 配置参数 ap argparse.ArgumentParser() ap.add_argument("-v", "--video", typestr,help"path to input video file") ap.add_argument("-t", "--tracker", …

第1天----验证一个字符串是否是另一个字符串的子串

本文我们将学习如何去验证一个字符串是否是另一个字符串的子串。 一、小试牛刀&#xff1a; 题目描述 输入两个字符串&#xff0c;验证其中一个串是否为另一个串的子串。 输入格式 两行&#xff0c;每行一个字符串。 输出格式 若第一个串 s 1 是第二个串 s 2 的子串&#xff0c…

java Spring Boot properties多环境配置拆分文件管理

上文 java Spring Boot yml多环境拆分文件管理优化 我们用yml 做了一个多环境配置文件的拆分管理 我们将 application.yml 改为 application.properties 参考代码如下 spring.profiles.activedev我们知道 yml 是用 : 来区分高低基本 而 properties是直接通过 . 来表达 其他基本…

SpringCloud实用篇7——深入elasticsearch

目录 1 数据聚合1.1 聚合的种类1.2 DSL实现聚合1.2.1 Bucket聚合语法1.2.2 聚合结果排序1.2.3 限定聚合范围1.2.4 Metric聚合语法1.2.5.小结 1.3 RestAPI实现聚合1.3.1 API语法1.3.2 业务需求1.3.3 业务实现 2 自动补全2.1 拼音分词器2.2 自定义分词器2.3 自动补全查询2.4 实现…

POJ 1995 Raising Modulo Numbers 快速幂

一、总结 我一开始担心溢出&#xff0c;开了一个无符号的long long&#xff0c;但是直接超时&#xff0c;后来一看它的mod不是很大&#xff0c;于是改成int&#xff0c;直接过了。 二、代码 #include <iostream> using namespace std; int H, Z; int M; int mulMod(in…

Python基础教程:私有变量的访问和赋值教程

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 首先我们这里先描述下&#xff1a; Python中&#xff0c;变量名类似__x__的&#xff0c;以双下划线开头&#xff0c;并且以双下划线结尾的&#xff0c;是特殊变量&#xff0c;特殊变量是可以直接访问的&#xff08;比如 doc, __i…

SpringBoot3集成ElasticSearch

标签&#xff1a;ElasticSearch8.Kibana8&#xff1b; 一、简介 Elasticsearch是一个分布式、RESTful风格的搜索和数据分析引擎&#xff0c;适用于各种数据类型&#xff0c;数字、文本、地理位置、结构化数据、非结构化数据&#xff1b; 在实际的工作中&#xff0c;历经过Ela…

QT的设计器介绍

设计器介绍 Qt制作 UI 界面&#xff0c;一般可以通过UI制作工具QtDesigner和纯代码编写两种方式来实现。纯代码实现暂时在这里不阐述了在后续布局章节详细说明&#xff0c;QtDesigner已经继承到开发环境中&#xff0c;在工程中直接双击ui文件就可以直接在QtDesigner设计器中打…

【100天精通python】Day39:GUI界面编程_PyQt 从入门到实战(下)_图形绘制和动画效果,数据可视化,刷新交互

目录 专栏导读 6 图形绘制与动画效果 6.1 绘制基本图形、文本和图片 6.2 实现动画效果和过渡效果 7 数据可视化 7.1 使用 Matplotlib绘制图表 7.2 使用PyQtGraph绘制图表 7.3 数据的实时刷新和交互操作 7.3.1 数据的实时刷新 7.3.2 交互操作 7.4 自定义数据可视化…

【WPF】 本地化的最佳做法

【WPF】 本地化的最佳做法 资源文件英文资源文件 en-US.xaml中文资源文件 zh-CN.xaml 资源使用App.xaml主界面布局cs代码 App.config辅助类语言切换操作类资源 binding 解析类 实现效果 应用程序本地化有很多种方式&#xff0c;选择合适的才是最好的。这里只讨论一种方式&#…

Unity制作一个简单的登入注册页面

1.创建Canvas组件 首先我们创建一个Canvas画布&#xff0c;我们再在Canvas画布底下创建一个空物体&#xff0c;取名为Resgister。把空物体的锚点设置为全屏撑开。 2.我们在Resgister空物体底下创建一个Image组件&#xff0c;改名为bg。我们也把它 的锚点设置为全屏撑开状态。接…

【深入理解ES6】字符串和正则表达式

概念 字符串&#xff08;String&#xff09;是JavaScript6大原始数据类型。其他几个分别是Boolean、Null、Undefined、Number、Symbol&#xff08;es6新增&#xff09;。 更好的Unicode支持 1. UTF-16码位 字符串里的字符有两种&#xff1a; 前 个码位均以16位的编码单元…

总结,由于顺丰的问题,产生了电脑近期一个月死机问题集锦

由于我搬家&#xff0c;我妈搞顺丰发回家&#xff0c;但是没有检查有没有坏&#xff0c;并且我自己由于不可抗力因素&#xff0c;超过了索赔时间&#xff0c;反馈给顺丰客服&#xff0c;说超过了造成了无法索赔的情况&#xff0c;现在总结发生了损坏配件有几件&#xff0c;显卡…