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

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

news 2025/9/19 3:00:20

注意：

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>

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

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

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

韩信走马分油c++

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

编程日记 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安装包的下载途径一：本地windows下…...

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

渗透测试导论

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

编程日记 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 启动虚拟机剑子仙迹诗号：何须剑道争锋？千人指&#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 个顶点的双向图，其中每个顶点标记从 0 到 n - 1（包含 0 和 n - 1）。图中的边用一个二维整数数组 edges 表示，其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 vi 之间的双向边。每个顶点对由最多一条边连接&#x…...

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

FLINK SQL语法(1)

DDL Flink SQL DDL（Data Definition Language）是Flink SQL中用于定义和管理数据结构和数据库对象的语法。以下是对Flink SQL DDL的详细解析： 一、创建数据库（CREATE DATABASE） 语法：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. 定义与特点：2. 工作原理：3. 应用场景： 二、入门案例一、WebSocket 详解 1. 定义与特点： WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据传…...

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

k8s集群版本升级

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

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

XML 和 SimpleXML 简介

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

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

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

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

编程日记 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