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

前端开发攻略---取消已经发出但是还未响应的网络请求

news 2026/2/9 23:00:52

目录

注意：

1、Axios实现

2、Fetch实现

3、XHR实现

注意：

当请求被取消时，只会本地停止处理此次请求，服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。

1、Axios实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="getData()">获取数据</button><button onclick="cancel()">取消请求</button><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script><script>// 创建一个取消令牌const CancelToken = axios.CancelToken// 用于存储取消函数let cancelFn = nullfunction getData() {// 发起请求axios.get('http://127.0.0.1:3000/data', {cancelToken: new CancelToken(function executor(c) {cancelFn = c // 保存取消函数}),}).then(response => {// 请求成功时处理响应console.log('拿到数据:', response.data)}).catch(error => {// 处理错误if (axios.isCancel(error)) {// 如果是取消请求的错误，输出相关信息console.log('请求已取消:', error.message)} else {// 处理其他类型的请求错误console.error('请求失败:', error)}})}function cancel() {// 调用取消函数，传入取消的原因cancelFn && cancelFn('取消请求') // 取消请求}</script></body>
</html>

2、Fetch实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="getData()">获取数据</button><button onclick="cancel()">取消请求</button><script>let controller = nullfunction getData() {// 创建一个AbortController实例controller = new AbortController()// 发起请求fetch('http://127.0.0.1:3000/data', { signal: controller.signal }).then(response => {if (!response.ok) {throw new Error('获取数据失败')}return response.json()}).then(data => {console.log(data)}).catch(error => {if (error.name === 'AbortError') {console.log('Fetch请求已取消')} else {console.error('Fetch请求错误:', error)}})}function cancel() {controller && controller.abort() // 取消请求}</script></body>
</html>

3、XHR实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="getData()">获取数据</button><button onclick="cancel()">取消请求</button><script>let xhr = nullfunction getData() {// 创建一个新的 XMLHttpRequest 对象xhr = new XMLHttpRequest()// 配置请求xhr.open('GET', 'http://127.0.0.1:3000/data', true)// 定义回调函数xhr.onload = function () {if (xhr.status >= 200 && xhr.status < 300) {console.log('响应结果:', xhr.responseText)} else {console.error('响应失败:', xhr.status)}}xhr.onerror = function () {console.error('请求失败')}// 发送请求xhr.send()}function cancel() {xhr && xhr.abort() // 取消请求}</script></body>
</html>

相关文章：

前端开发攻略---取消已经发出但是还未响应的网络请求

目录 注意&#xff1a; 1、Axios实现 2、Fetch实现 3、XHR实现 注意&#xff1a; 当请求被取消时&#xff0c;只会本地停止处理此次请求&#xff0c;服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。 1、Axios实现 <!DOCTYPE html> &…...

编程日记 2024/10/19 2:41:16

韩信走马分油c++

韩信走马分油c 题目算法代码 题目 把油桶里还剩下的10斤油平分&#xff0c;只有一个能装3斤的油葫芦和一个能装7斤的瓦罐。如何分。 算法 油壶编号0&#xff0c;1&#xff0c;2。不同倒法有&#xff1a;把油从0倒进0&#xff08;本壶到本壶&#xff0c;无效&#xff09;&…...

编程日记 2024/10/19 2:39:14

【Linux】Anaconda下载安装配置Pytorch安装配置（保姆级）

目录 Anaconda下载 Anaconda安装 conda init conda --v Conda 配置 conda 环境创建 conda info --envs conda list Pytorch安装配置 检验安装情况 检验是否可以使用GPU Anaconda下载 可以通过两种途径完成Anaconda安装包的下载 途径一&#xff1a;本地windows下…...

编程日记 2024/10/19 2:37:12

渗透测试导论

渗透测试的定义和目的 渗透测试&#xff08;Penetration Testing&#xff09;是一项安全演习&#xff0c;网络安全专家尝试查找和利用计算机系统中的漏洞。 模拟攻击的目的是识别攻击者可以利用的系统防御中的薄弱环节。 这就像银行雇用别人假装盗匪&#xff0c;让他们试图闯…...

编程日记 2024/10/19 2:35:10

鸿蒙学习笔记--搭建开发环境及Hello World

文章目录 一、概述二、开发工具下载安装2.1 下载开发工具DevEco Studio NEXT2.2 安装DevEco Studio 三、启动软件四、第一个应用Hello World4.1 创建应用4.2 创建模拟器4.3 开启Hyper-v功能4.4 启动虚拟机 剑子仙迹 诗号&#xff1a;何须剑道争锋&#xff1f;千人指&#xff0c…...

编程日记 2024/10/19 2:34:10

【ArcGIS风暴】ArcGIS字段计算器公式汇总

在GIS数据处理中，ArcGIS的字段计算器是一个强大的工具，它可以帮助我们进行各种数值计算、文本处理和逻辑判断。本文将为您整合和分类介绍ArcGIS字段计算器中的常用公式，并通过实例说明它们的应用。 文章目录 一、数值计算类二、文本处理类三、日期和时间类四、逻辑判断类五、…...

编程日记 2024/10/19 2:33:09

探索秘境：如何使用智能体插件打造专属的小众旅游助手『小众旅游探险家』

文章目录 摘要引言智能体介绍和亮点展示介绍亮点展示 已发布智能体运行效果智能体创意想法创意想法创意实现路径拆解 如何制作智能体可能会遇到的几个问题快速调优指南总结未来展望 摘要 本文将详细介绍如何使用智能体平台开发一款名为“小众旅游探险家”的旅游智能体。通过这…...

编程日记 2024/10/19 2:32:08

机械臂力控方法概述（一）

目录 1. MoveIt 适用范围 2. 力控制框架与 MoveIt 的区别 3. 力控方法 3.1 直接力控制 (Direct Force Control) 3.2 间接力控制 (Indirect Force Control) 3.2.1 柔顺控制 (Compliant Control) 3.2.2 阻抗控制 (Impedance Control) 3.2.3 导纳控制 (Admittance Control…...

编程日记 2024/10/19 2:31:07

1971. 寻找图中是否存在路径

有一个具有 n 个顶点的 双向 图&#xff0c;其中每个顶点标记从 0 到 n - 1&#xff08;包含 0 和 n - 1&#xff09;。图中的边用一个二维整数数组 edges 表示&#xff0c;其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 vi 之间的双向边。 每个顶点对由 最多一条 边连接&#x…...

编程日记 2024/10/19 2:29:05

FLINK SQL语法(1)

DDL Flink SQL DDL&#xff08;Data Definition Language&#xff09;是Flink SQL中用于定义和管理数据结构和数据库对象的语法。以下是对Flink SQL DDL的详细解析&#xff1a; 一、创建数据库&#xff08;CREATE DATABASE&#xff09; 语法&#xff1a;CREATE DATABASE [IF…...

编程日记 2024/10/19 2:26:02

【Fargo】1：基于libuv的udp收发程序

开发UDP处理程序 我正在开发一个基于libuv的UDP发送/接收程序，区分发送端和接收端，设计自定义包数据结构，识别和处理丢包和乱序。 创建项目需求 用户正在要求一个使用libuv的C++程序，涉及UDP发送和接收，数据包包括序列号和时间戳，接收端需要检测丢包和乱序包。 撰写代…...

编程日记 2024/10/19 2:25:01

WebSocket介绍和入门案例

目录 一、WebSocket 详解1. 定义与特点&#xff1a;2. 工作原理&#xff1a;3. 应用场景&#xff1a; 二、入门案例 一、WebSocket 详解 1. 定义与特点&#xff1a; WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据传…...

编程日记 2024/10/19 2:22:59

k8s集群版本升级

Kubernetes 集群版本升级是为了获得最新的功能、增强的安全性和性能改进。然而&#xff0c;升级过程需要谨慎进行&#xff0c;特别是在生产环境中。通常&#xff0c;Kubernetes 集群的版本升级应遵循逐步升级的策略&#xff0c;不建议直接跳过多个版本。 Kubernetes 版本升级的…...

编程日记 2024/10/19 2:21:58

XML 和 SimpleXML 简介

XML 和 SimpleXML 简介 XML&#xff08;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。它定义了一组规则&#xff0c;用于在文档中编码数据&#xff0c;以便人和机器都能理解。XML 的设计目标是既易于人类阅读&#xff0c;也易于机器解析。SimpleXML 是 PHP…...

编程日记 2024/10/19 2:18:54

MySQL 中 LIKE 语句的 `%` 和 `_` 以及 BLOB 和 TEXT 的详细解析和案例示范

1. LIKE 语句中的 % 和 _ 用法 1.1 % 通配符的用法 % 通配符代表零个或多个字符。它是 MySQL 中用于模糊匹配的强大工具之一&#xff0c;可以在任何字符的位置使用。 示例 1&#xff1a;查找以特定字符开头的记录 假设我们有一个电商订单系统的 orders 表&#xff0c;其中包…...

编程日记 2024/10/19 2:17:53

git clone卡在Receiving objects

git clone卡在Receiving objects 一直卡主 $ git clone gitxxx.git Cloning into xxx... remote: Enumerating objects: 75926, done. remote: Counting objects: 100% (18844/18844), done. remote: Compressing objects: 100% (6566/6566), done. Receiving objects: 60% (…...

编程日记 2024/10/19 2:16:52

vue+ant 弹窗可以拖动

通过自定义指令实现拖拽功能 在main.js里加入drag自定义指令 我自己测试时发现modal不管如何设置宽度&#xff0c;居中等&#xff0c;他的初始的left都为0&#xff0c;如果不设置好&#xff0c;容易出现点击后刚开始移动弹窗会偏移一段距离。 Vue.directive(drag, {bind(el)…...

编程日记 2024/10/19 2:14:50

（42）MATLAB中使用fftshift绘制以零为中心的功率谱

文章目录 前言一、MATLAB代码二、仿真结果画图 前言 在分析信号的频率分量时&#xff0c;将零频分量平移到频谱中心会很有帮助。本例给出绘制以零为中心的功率谱的方法。 一、MATLAB代码 代码如下&#xff1a; f 1; % 余弦波的振荡频率&#xf…...

编程日记 2024/10/19 2:12:48

Windows本地部署中文羊驼模型（Chinese-Alpaca-Pro-7B）（通俗易懂版）

最近由于项目原因需要部署大语言模型, 但碍于经济实力, 只能部署在笔记本电脑上部署量化模型, &#xff08;电脑至少有16G运行内存&#xff09;&#xff0c;搜集了网上的相关部署资料仍然踩了不少坑&#xff0c;原因在于开源项目在不断更新&#xff0c;导致我们看了别人的教程仍…...

编程日记 2024/10/19 2:11:47

Web3的挑战与机遇：技术发展的现状分析

在Web3的世界中&#xff0c;去中心化和用户主权的理念正逐渐走向主流&#xff0c;推动了现有商业模式和技术生态系统的深刻变革。区块链技术及其核心应用之一——智能合约&#xff0c;正在促使这一转变的发生。智能合约的主要功能是通过自动化和预设协议执行&#xff0c;以减少…...

编程日记 2024/10/19 2:07:44

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09