当前位置: 首页 > news >正文

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页面

在这里插入图片描述

跳转至其他页面

image

由于c接口加入了cancelToken: null, 所以不会被杀掉。a和b状态已经变为canceled。
在这里插入图片描述

相关文章:

js路由跳转时放弃正在pending的请求

在单页面应用中通常会对请求进行catch处理&#xff0c;如果用户打开a页面后页面发出了一个请求去获取aaa&#xff0c;但是由于某种原因请求一直在pending。此时用户又进入了b页面&#xff0c;在浏览时a页面的请求失败了&#xff0c;然后页面弹出提示&#xff1a;“数据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)配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍grpc远程过程调用&#xff08;RPC&#xff09;配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜…...

rabbitmq模块启动报java.net.SocketException: socket closed的解决方法

问题 最近在接手一个项目时&#xff0c;使用的是spring-cloud微服务构架&#xff0c;mq消息消费模块是单独一个模块&#xff0c;但启动这个模块一直报如下错误&#xff1a; java.net.SocketException: socket closed 这个错误是这个模块注册不到nacos报的错&#xff0c;刚开…...

uni-app 中定时器的使用

学习目标&#xff1a; 学习目标如下所示&#xff1a; uniapp中通过使用uni-app提供的定时器API来实现定时器功能。 学习内容&#xff1a; 内容如下所示&#xff1a; **uni-app的定时器API分为两种&#xff1a; 1.第一种方式&#xff1a; setTimeout函数&#xff0c;用于设置一…...

基于物联网、视频监控与AI视觉技术的智慧电厂项目智能化改造方案

一、项目背景 现阶段&#xff0c;电力行业很多企业都在部署摄像头对电力巡检现场状况进行远程监控&#xff0c;但是存在人工查看费时、疲劳、出现问题无法第一时间发现等管理弊端&#xff0c;而且安全事件主要依靠人工经验判断分析、管控&#xff0c;效率十分低下。 为解决上述…...

内网穿透远程查看内网监控摄像头

内网穿透远程查看内网监控摄像头 在现代社会中&#xff0c;大家总是奔波于家和公司之间。大部分时间用于工作中&#xff0c;也就很难及时知晓家中的动态情况&#xff0c;对于家中有老人、小孩或宠物的&#xff08;甚至对居住环境安全不放心的&#xff09;&#xff0c;这已然是…...

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…...

三款即时通讯工具推荐:J2L3x、Telegram、WhatsApp 你选哪个?

1、J2L3x J2L3x 是一款受欢迎的即时通讯工具&#xff0c;广泛应用于企业团队之间的沟通和协作。它提供了多种通讯方式&#xff0c;包括群组聊天、私人消息和文件共享等&#xff0c;还可以方便地与其他应用程序和服务集成。即使你不在工作场所&#xff0c;你也可以在任何地方使…...

C++ 单例模式(介绍+实现)

文章目录 一. 设计模式二. 单例模式三. 饿汉模式四. 懒汉模式结束语 一. 设计模式 单例模式是一种设计模式 设计模式(Design Pattern)是一套被反复使用&#xff0c;多数人知晓的&#xff0c;经过分类的&#xff0c;代码设计经验的总结。 为什么要有设计模式 就像人类历史发展会…...

uniapp项目集成本地插件

在项目根目录下创建nativeplugins文件夹 拷贝插件到目录nativeplugins 在manifest.json -> App原生插件配置 -> 本地插件里勾选插件 删除本地基座和手机app从新自定义基座运行...

MFC CList 类的使用

MFC提供CList 类&#xff1b; 类CList支持可按顺序或按值访问的非唯一对象的有序列表&#xff1b;CList 列表与双链接列表行为相似&#xff1b; 类型POSITION的变量是列表的关键字&#xff1b;可使用POSITION变量作为循环因子来顺序遍历列表&#xff0c;作为书签来保存位置&am…...

iptable防火墙

防火墙 防火墙的主要功能是隔离&#xff0c;决定数据是否可以被外网访问以及哪些数据可以进入内。 它主要部署在网络边缘或者主机边缘&#xff0c;应用在网络层。 防火墙的安全技术: 1、入侵检测系统&#xff1a;检测数威胁&#xff0c;病毒&#xff0c;木马&#xff0c;不…...

二、SQL-5.DQL-9).执行顺序

一、案例&#xff1a; 查询年龄大于15的员工的姓名、年龄&#xff0c;并根据年龄进行升序排序 select name, age from emp where age > 15 order by age asc; 先执行①from&#xff08;定义emp的别名为e&#xff09;&#xff0c;再执行②where&#xff08;调用别名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实现右上角消息数量实时更新 背景 项目需求&#xff0c;前端右上角铃铛图标 显示接收到的消息通知&#xff0c;并且显示消息数量以及实时更新。&#xff08;一般是点击操作按钮后增加一条消息通知&#xff0c;图标上的数字也随之更新&#xff09; 【原来的想…...

去除重复字母(力扣)贪心 + 队列 JAVA

给你一个字符串 s &#xff0c;请你去除字符串中重复的字母&#xff0c;使得每个字母只出现一次。需保证 返回结果的字典序最小&#xff08;要求不能打乱其他字符的相对位置&#xff09;。 示例 1&#xff1a; 输入&#xff1a;s “bcabc” 输出&#xff1a;“abc” 示例 2&am…...

Spring,SpringBoot,Spring MVC的区别是什么

1.Spring是什么 我们通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽庞⼤的社区&#xff0c;这就是它之所以能⻓久不衰的原因。Spring ⽀持⼴泛的应⽤场景&#xff0c;它可以让 Java 企业级…...

在CSDN学Golang云原生(Docker镜像)

一&#xff0c;镜像分层机制 在 Docker 中&#xff0c;一个镜像可以由多个分层&#xff08;Layer&#xff09;组成。每个分层都表示一些修改或添加到上一个分层的文件系统差异。 Golang 在构建 Docker 镜像时也支持类似的机制&#xff0c;通过 docker build 命令来创建一个包…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

云原生安全实战:API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

手动给中文分词和 直接用神经网络RNN做有什么区别

手动分词和基于神经网络&#xff08;如 RNN&#xff09;的自动分词在原理、实现方式和效果上有显著差异&#xff0c;以下是核心对比&#xff1a; 1. 实现原理对比 对比维度手动分词&#xff08;规则 / 词典驱动&#xff09;神经网络 RNN 分词&#xff08;数据驱动&#xff09…...