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

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

news 2026/5/30 12:07:32

目录

注意：

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

Blender渲染通道完全指南：如何像电影后期一样，分离出深度、阴影与反射图

Blender渲染通道完全指南&#xff1a;影视级后期制作的深度解析在数字内容创作领域&#xff0c;Blender已经从一个简单的3D建模工具成长为能够处理复杂视觉特效的全流程解决方案。对于追求影视级质量的中高级用户而言&#xff0c;掌握渲染通道技术是提升作品专业度的关键一步。…...

编程新知 2026/5/26 2:43:41

BLE四大广播模式详解：可连接/不可连接/定向/周期广播

一、前言在低功耗蓝牙&#xff08;BLE&#xff09;开发中&#xff0c;广播&#xff08;Advertising&#xff09;是设备发现、连接建立、数据广播、设备重连的核心基石&#xff0c;所有BLE交互流程均始于广播报文的收发。不同于传统经典蓝牙&#xff0c;BLE所有广播行为标准化、…...

编程新知 2026/5/26 2:09:15

鸿蒙系统微博应用锁常见问题解答

为微博设置应用锁后&#xff0c;不少用户会有各种疑问&#xff1a;忘记密码怎么办&#xff1f;会不会影响消息推送&#xff1f;能不能只锁定某些功能&#xff1f;应用锁耗电吗&#xff1f;本文将针对这些高频问题逐一解答&#xff0c;帮助您更好地使用鸿蒙系统&#xff08;Harm…...

编程新知 2026/5/26 1:27:07

taotoken如何帮助ubuntu开发者应对大模型api的频繁更新与版本迭代

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken如何帮助Ubuntu开发者应对大模型API的频繁更新与版本迭代 对于在Ubuntu环境下进行开发的工程师而言&#xff0c;大模型API…...

编程新知 2026/5/25 23:00:46

RevSSH反向SSH隧道：无公网IP设备的安全远程运维方案

1. 这不是又一个SSH封装工具——RevSSH解决的是“根本性连接悖论”你有没有遇到过这样的场景&#xff1a;一台部署在客户内网的嵌入式设备&#xff0c;没有公网IP&#xff0c;NAT穿透失败&#xff0c;防火墙策略死死锁住所有入向端口&#xff0c;连ICMP都被禁了&#xff1b;或者…...

编程新知 2026/5/25 21:47:59

【python】ImportError: DLL load failed while importing QtWidgets: 找不到指定的程序。重新安装后搞定

文章目录前言一、PyQt6引用后报错二、使用步骤总结前言 想做个好看的界面&#xff0c;引用了PyQt6&#xff0c;却产生了新问题。 pip install pyqt6-tools&#xff0c;优先做这个动作进行修复。 一、PyQt6引用后报错 python里引用&#xff1a; from PyQt6.QtWidgets import…...

编程新知 2026/5/25 21:13:33

国内大学生常用的AI写作辅助平台有哪些？

国内高校学生常用的 AI 写作辅助平台&#xff0c;以本土化全流程工具为主&#xff0c;结合通用大模型与专项功能模块&#xff0c;覆盖选题构思、大纲搭建、初稿撰写、语言润色、降重处理、查重检测及格式排版等关键环节&#xff0c;以下是主流平台详解与对比&#xff1a; 一、本…...

编程新知 2026/5/25 20:03:51

LeagueAkari：基于LCU接口的英雄联盟客户端自动化工具深度解析

LeagueAkari&#xff1a;基于LCU接口的英雄联盟客户端自动化工具深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 功能模块架构与核心技…...

编程新知 2026/5/25 16:52:47

大模型测试新范式：Claude端到端验证的5层断言体系（语义一致性/上下文连贯性/安全边界/成本阈值/时序鲁棒性）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;大模型测试新范式&#xff1a;Claude端到端验证的5层断言体系&#xff08;语义一致性/上下文连贯性/安全边界/成本阈值/时序鲁棒性&#xff09; 传统LLM测试常聚焦于准确率或BLEU等静态指标&#xff0c;而Cla…...

编程新知 2026/5/25 16:24:14

将deepseek v4 pro集成到codex桌面APP中使用

&#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》&#xff08;基础篇&#xff09;、&#xff08;进阶篇&#xff09;、《解密程序员的思维密码——沟通、演讲、思考的实践》作者、清华大学出版社签约作家、Java领域…...

编程新知 2026/5/25 16:12:49