js路由跳转时放弃正在pending的请求
在单页面应用中通常会对请求进行catch处理,如果用户打开a页面后页面发出了一个请求去获取aaa,但是由于某种原因请求一直在pending。此时用户又进入了b页面,在浏览时a页面的请求失败了,然后页面弹出提示:“数据aaa请求失败”。这就很尴尬了。虽然在对于a页面没什么问题,但是对于b页面来说这就是无用的提示。这时就需要在跳转页面时杀掉正在pending的请求了
axios的cancelToken
https://www.kancloud.cn/yunye/axios/234845
使用 cancel token 取消请求
可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:
var CancelToken = axios.CancelToken;
var source = CancelToken.source();axios.get('/user/12345', {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.');
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:
var CancelToken = axios.CancelToken;
var cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});// 取消请求
cancel();
vue路由跳转时cancel请求
定义请求services.js
import axios from 'axios';const url = 'http://localhost:3001';export function AApi() {return axios.get(`${url}/a`);
}export function BApi() {return axios.get(`${url}/b`);
}export function CApi() {return axios.get(`${url}/c`, {cancelToken: null, // 避免被加入cancel队列});
}
定义axios拦截器设置cancelToken
export * from './services';import axios from 'axios';const cancelTokenSources = new Map(); // 定义cancel队列axios.interceptors.request.use(config => { // 请求拦截器中将请求加入cancel队列if (!config.hasOwnProperty('cancelToken')) { // 排除不需要cancel的请求const source = axios.CancelToken.source();cancelTokenSources.set(source.token, source.cancel); // 加入cancel队列config.cancelToken = source.token;}return config;
}, error => Promise.reject(error));axios.interceptors.response.use(res => { // 响应拦截器中从cancel队列中移除if (res.config.cancelToken) {cancelTokenSources.delete(res.config.cancelToken);}return res;
}, error => {if (axios.isCancel(error)) {cancelTokenSources.delete(error.message)}return Promise.reject(error)
});export default cancelTokenSources;
将需要放弃的请求加入cancel队列
定义路由router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import cancelTokenSources from './api';Vue.use(Router);const router = new Router({mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: About}]
});router.afterEach(() => { // 路由跳转杀请求for (const [cancelToken, cancel] of cancelTokenSources) {cancel(cancelToken); // cancel 正在pending的请求}
});export default router;
路由跳转时对cancel队列进行遍历kill
定义about页面,放出请求
<template><div class="about"><h1>This is an about page</h1></div>
</template><script>import { AApi, BApi, CApi } from '../api';import axios from 'axios';export default {name: 'about',mounted() {AApi().catch(err => {if (axios.isCancel(err)) {console.log('请求被关闭了');} else {console.log('请求出问题了');}});BApi().catch(err => {if (axios.isCancel(err)) {console.log('请求被关闭了');} else {console.log('请求出问题了');}});CApi().catch(err => {if (axios.isCancel(err)) {console.log('请求被关闭了');} else {console.log('请求出问题了');}});}}
</script>
效果图
进入about页面

跳转至其他页面

由于c接口加入了cancelToken: null, 所以不会被杀掉。a和b状态已经变为canceled。

相关文章:
js路由跳转时放弃正在pending的请求
在单页面应用中通常会对请求进行catch处理,如果用户打开a页面后页面发出了一个请求去获取aaa,但是由于某种原因请求一直在pending。此时用户又进入了b页面,在浏览时a页面的请求失败了,然后页面弹出提示:“数据aaa请求失…...
LeetCode(sql)-0723
聚合函数 620 select * from cinema where mod(id,2)1 and description <> boring order by rating desc1251 select p.product_id, Round(sum(price*units)/sum(units),2)as average_price from UnitsSold u left join Prices p using(product_id) where purchase_d…...
【C++】开源:grpc远程过程调用(RPC)配置与使用
😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍grpc远程过程调用(RPC)配置与使用。 无专精则不能成,无涉猎则不能通。。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜…...
rabbitmq模块启动报java.net.SocketException: socket closed的解决方法
问题 最近在接手一个项目时,使用的是spring-cloud微服务构架,mq消息消费模块是单独一个模块,但启动这个模块一直报如下错误: java.net.SocketException: socket closed 这个错误是这个模块注册不到nacos报的错,刚开…...
uni-app 中定时器的使用
学习目标: 学习目标如下所示: uniapp中通过使用uni-app提供的定时器API来实现定时器功能。 学习内容: 内容如下所示: **uni-app的定时器API分为两种: 1.第一种方式: setTimeout函数,用于设置一…...
基于物联网、视频监控与AI视觉技术的智慧电厂项目智能化改造方案
一、项目背景 现阶段,电力行业很多企业都在部署摄像头对电力巡检现场状况进行远程监控,但是存在人工查看费时、疲劳、出现问题无法第一时间发现等管理弊端,而且安全事件主要依靠人工经验判断分析、管控,效率十分低下。 为解决上述…...
内网穿透远程查看内网监控摄像头
内网穿透远程查看内网监控摄像头 在现代社会中,大家总是奔波于家和公司之间。大部分时间用于工作中,也就很难及时知晓家中的动态情况,对于家中有老人、小孩或宠物的(甚至对居住环境安全不放心的),这已然是…...
【Flume 01】Flume简介、部署、组件
1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性: 它有一个简单、灵活的基于流的数据流结构(使用Event封装)具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…...
三款即时通讯工具推荐:J2L3x、Telegram、WhatsApp 你选哪个?
1、J2L3x J2L3x 是一款受欢迎的即时通讯工具,广泛应用于企业团队之间的沟通和协作。它提供了多种通讯方式,包括群组聊天、私人消息和文件共享等,还可以方便地与其他应用程序和服务集成。即使你不在工作场所,你也可以在任何地方使…...
C++ 单例模式(介绍+实现)
文章目录 一. 设计模式二. 单例模式三. 饿汉模式四. 懒汉模式结束语 一. 设计模式 单例模式是一种设计模式 设计模式(Design Pattern)是一套被反复使用,多数人知晓的,经过分类的,代码设计经验的总结。 为什么要有设计模式 就像人类历史发展会…...
uniapp项目集成本地插件
在项目根目录下创建nativeplugins文件夹 拷贝插件到目录nativeplugins 在manifest.json -> App原生插件配置 -> 本地插件里勾选插件 删除本地基座和手机app从新自定义基座运行...
MFC CList 类的使用
MFC提供CList 类; 类CList支持可按顺序或按值访问的非唯一对象的有序列表;CList 列表与双链接列表行为相似; 类型POSITION的变量是列表的关键字;可使用POSITION变量作为循环因子来顺序遍历列表,作为书签来保存位置&am…...
iptable防火墙
防火墙 防火墙的主要功能是隔离,决定数据是否可以被外网访问以及哪些数据可以进入内。 它主要部署在网络边缘或者主机边缘,应用在网络层。 防火墙的安全技术: 1、入侵检测系统:检测数威胁,病毒,木马,不…...
二、SQL-5.DQL-9).执行顺序
一、案例: 查询年龄大于15的员工的姓名、年龄,并根据年龄进行升序排序 select name, age from emp where age > 15 order by age asc; 先执行①from(定义emp的别名为e),再执行②where(调用别名e&…...
Ubuntu通用镜像加速配置
备份 cp -rf /etc/apt/sources.list /etc/apt/sources.list.bak开始配置 阿里云 sed -i shttp://archive.ubuntu.comhttps://mirrors.aliyun.comg /etc/apt/sources.listsed -i shttp://security.ubuntu.comhttps://mirrors.aliyun.comg /etc/apt/sources.list清华源 sed -i …...
Linux安装部署Nacos和sentinel
1.将nacos安装包下载到本地后上传到linux中 2.进入nacos的/bin目录,输入命令启动nacos [rootlocalhost bin]# sh startup.sh -m standalone注:使用第二种方式启动,同时增加日志记录的功能 2.2 startup.sh文件是不具备足够的权限,否则不能操作 给文件赋予执行权限 [rootlocalh…...
Vue3+ElementPlus+TS实现右上角消息数量实时更新
Vue3ElementPlusTS实现右上角消息数量实时更新 背景 项目需求,前端右上角铃铛图标 显示接收到的消息通知,并且显示消息数量以及实时更新。(一般是点击操作按钮后增加一条消息通知,图标上的数字也随之更新) 【原来的想…...
去除重复字母(力扣)贪心 + 队列 JAVA
给你一个字符串 s ,请你去除字符串中重复的字母,使得每个字母只出现一次。需保证 返回结果的字典序最小(要求不能打乱其他字符的相对位置)。 示例 1: 输入:s “bcabc” 输出:“abc” 示例 2&am…...
Spring,SpringBoot,Spring MVC的区别是什么
1.Spring是什么 我们通常所说的 Spring 指的是 Spring Framework(Spring 框架),它是⼀个开源框架,有着活跃⽽庞⼤的社区,这就是它之所以能⻓久不衰的原因。Spring ⽀持⼴泛的应⽤场景,它可以让 Java 企业级…...
在CSDN学Golang云原生(Docker镜像)
一,镜像分层机制 在 Docker 中,一个镜像可以由多个分层(Layer)组成。每个分层都表示一些修改或添加到上一个分层的文件系统差异。 Golang 在构建 Docker 镜像时也支持类似的机制,通过 docker build 命令来创建一个包…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
k8s从入门到放弃之HPA控制器
k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率(或其他自定义指标)来调整这些对象的规模,从而帮助应用程序在负…...
