前端开发攻略---取消已经发出但是还未响应的网络请求
目录
注意：
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> &…...
韩信走马分油c++
韩信走马分油c 题目算法代码 题目 把油桶里还剩下的10斤油平分，只有一个能装3斤的油葫芦和一个能装7斤的瓦罐。如何分。 算法 油壶编号0，1，2。不同倒法有：把油从0倒进0（本壶到本壶，无效）&…...
【Linux】Anaconda下载安装配置Pytorch安装配置（保姆级）
目录 Anaconda下载 Anaconda安装 conda init conda --v Conda 配置 conda 环境创建 conda info --envs conda list Pytorch安装配置 检验安装情况 检验是否可以使用GPU Anaconda下载 可以通过两种途径完成Anaconda安装包的下载 途径一：本地windows下…...
渗透测试导论
渗透测试的定义和目的 渗透测试（Penetration Testing）是一项安全演习，网络安全专家尝试查找和利用计算机系统中的漏洞。 模拟攻击的目的是识别攻击者可以利用的系统防御中的薄弱环节。 这就像银行雇用别人假装盗匪，让他们试图闯…...
鸿蒙学习笔记--搭建开发环境及Hello World
文章目录 一、概述二、开发工具下载安装2.1 下载开发工具DevEco Studio NEXT2.2 安装DevEco Studio 三、启动软件四、第一个应用Hello World4.1 创建应用4.2 创建模拟器4.3 开启Hyper-v功能4.4 启动虚拟机 剑子仙迹 诗号：何须剑道争锋？千人指，…...
【ArcGIS风暴】ArcGIS字段计算器公式汇总
在GIS数据处理中，ArcGIS的字段计算器是一个强大的工具，它可以帮助我们进行各种数值计算、文本处理和逻辑判断。本文将为您整合和分类介绍ArcGIS字段计算器中的常用公式，并通过实例说明它们的应用。 文章目录 一、数值计算类二、文本处理类三、日期和时间类四、逻辑判断类五、…...
探索秘境：如何使用智能体插件打造专属的小众旅游助手『小众旅游探险家』
文章目录 摘要引言智能体介绍和亮点展示介绍亮点展示 已发布智能体运行效果智能体创意想法创意想法创意实现路径拆解 如何制作智能体可能会遇到的几个问题快速调优指南总结未来展望 摘要 本文将详细介绍如何使用智能体平台开发一款名为“小众旅游探险家”的旅游智能体。通过这…...
机械臂力控方法概述（一）
目录 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…...
1971. 寻找图中是否存在路径
有一个具有 n 个顶点的 双向 图，其中每个顶点标记从 0 到 n - 1（包含 0 和 n - 1）。图中的边用一个二维整数数组 edges 表示，其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 vi 之间的双向边。 每个顶点对由 最多一条 边连接&#x…...
)
FLINK SQL语法(1)
DDL Flink SQL DDL（Data Definition Language）是Flink SQL中用于定义和管理数据结构和数据库对象的语法。以下是对Flink SQL DDL的详细解析： 一、创建数据库（CREATE DATABASE） 语法：CREATE DATABASE [IF…...
【Fargo】1：基于libuv的udp收发程序
开发UDP处理程序 我正在开发一个基于libuv的UDP发送/接收程序，区分发送端和接收端，设计自定义包数据结构，识别和处理丢包和乱序。 创建项目需求 用户正在要求一个使用libuv的C++程序，涉及UDP发送和接收，数据包包括序列号和时间戳，接收端需要检测丢包和乱序包。 撰写代…...
WebSocket介绍和入门案例
目录 一、WebSocket 详解1. 定义与特点：2. 工作原理：3. 应用场景： 二、入门案例 一、WebSocket 详解 1. 定义与特点： WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据传…...
k8s集群版本升级
Kubernetes 集群版本升级是为了获得最新的功能、增强的安全性和性能改进。然而，升级过程需要谨慎进行，特别是在生产环境中。通常，Kubernetes 集群的版本升级应遵循逐步升级的策略，不建议直接跳过多个版本。 Kubernetes 版本升级的…...
XML 和 SimpleXML 简介
XML 和 SimpleXML 简介 XML（可扩展标记语言）是一种用于存储和传输数据的标记语言。它定义了一组规则，用于在文档中编码数据，以便人和机器都能理解。XML 的设计目标是既易于人类阅读，也易于机器解析。SimpleXML 是 PHP…...
MySQL 中 LIKE 语句的 `%` 和 `_` 以及 BLOB 和 TEXT 的详细解析和案例示范
1. LIKE 语句中的 % 和 _ 用法 1.1 % 通配符的用法 % 通配符代表零个或多个字符。它是 MySQL 中用于模糊匹配的强大工具之一，可以在任何字符的位置使用。 示例 1：查找以特定字符开头的记录 假设我们有一个电商订单系统的 orders 表，其中包…...
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% (…...
vue+ant 弹窗可以拖动
通过自定义指令实现拖拽功能 在main.js里加入drag自定义指令 我自己测试时发现modal不管如何设置宽度，居中等，他的初始的left都为0，如果不设置好，容易出现点击后刚开始移动弹窗会偏移一段距离。 Vue.directive(drag, {bind(el)…...
（42）MATLAB中使用fftshift绘制以零为中心的功率谱
文章目录 前言一、MATLAB代码二、仿真结果画图 前言 在分析信号的频率分量时，将零频分量平移到频谱中心会很有帮助。本例给出绘制以零为中心的功率谱的方法。 一、MATLAB代码 代码如下： f 1; % 余弦波的振荡频率…...
Windows本地部署中文羊驼模型（Chinese-Alpaca-Pro-7B）（通俗易懂版）
最近由于项目原因需要部署大语言模型, 但碍于经济实力, 只能部署在笔记本电脑上部署量化模型, （电脑至少有16G运行内存），搜集了网上的相关部署资料仍然踩了不少坑，原因在于开源项目在不断更新，导致我们看了别人的教程仍…...
Web3的挑战与机遇：技术发展的现状分析
在Web3的世界中，去中心化和用户主权的理念正逐渐走向主流，推动了现有商业模式和技术生态系统的深刻变革。区块链技术及其核心应用之一——智能合约，正在促使这一转变的发生。智能合约的主要功能是通过自动化和预设协议执行，以减少…...
新手福音：通过快马平台调用codex，用自然语言学写计算器代码
作为一个刚接触编程的新手，我最近发现了一个特别友好的学习方式——通过自然语言描述让AI帮我生成代码。这次我想做一个简单的网页计算器，在InsCode(快马)平台上体验了一把用codex模型生成代码的过程，收获很大。下面分享我的学习笔记…...
华三MSR系列路由器单臂路由配置全记录：从实验环境搭建到真机部署避坑指南
华三MSR路由器单臂路由实战：从实验室到生产环境的全流程指南 单臂路由技术在企业网络架构中扮演着关键角色，特别是在需要实现多VLAN互通又要求流量隔离的中小型网络场景。华三MSR系列路由器（如MSR2600/3600）凭借其稳定的性能和灵活…...
字符串匹配：KMP 不用死记，图解+一步一步推导
字符串匹配：KMP 不用死记，一步一步推导彻底理解 KMP 算法的设计思想，从此不再害怕手写 next 数组前言 字符串匹配是计算机科学中最基础、最常用的问题之一，广泛应用于搜索引擎、文本编辑、病毒检测、DNA序列分析等场景。其核心需求…...
快马AI助力：十分钟用openclaw搭建局域网访问服务原型
今天想和大家分享一个快速搭建局域网访问服务原型的经验。最近在做一个内部项目，需要让团队成员能方便地访问我本地开发的服务，于是想到了用openclaw这个工具来实现内网穿透。整个过程比想象中简单很多，特别是在InsCode(快马)平台的帮助下&am…...
WPF调试神器：如何在GUI应用中优雅地输出Console日志（附完整代码）
WPF调试神器：如何在GUI应用中优雅地输出Console日志（附完整代码） 在WPF开发过程中，调试信息的实时输出是排查问题的关键环节。传统弹窗或文件日志方式要么打断用户体验，要么缺乏即时性。本文将介绍一种兼顾优雅与高效的…...
STM32光敏传感器实战：从硬件连接到智能路灯控制（附完整代码）
STM32光敏传感器实战：从硬件连接到智能路灯控制（附完整代码） 在物联网和智能家居快速发展的今天，环境光检测已成为许多自动化系统的基础功能。作为一名嵌入式开发者，掌握光敏传感器与STM32微控制器的集成应用ÿ…...
OpenClaw技能扩展实战：用Qwen3-14B镜像自动生成技术文档
OpenClaw技能扩展实战：用Qwen3-14B镜像自动生成技术文档 1. 为什么需要自动化文档生成 作为一个经常需要编写技术文档的开发者，我长期被两个问题困扰：一是文档写作耗时太长，二是维护成本太高。每次代码更新后，文档版…...
MVP.css暗黑模式终极指南：如何完美适配用户偏好与系统设置
MVP.css暗黑模式终极指南：如何完美适配用户偏好与系统设置 【免费下载链接】mvp MVP.css — Minimalist classless CSS stylesheet for HTML elements 项目地址: https://gitcode.com/gh_mirrors/mv/mvp MVP.css是一款极简主义的无类CSS样式表，为…...
网易云音乐无损解析工具：从音质痛点到音乐收藏全方案
网易云音乐无损解析工具：从音质痛点到音乐收藏全方案 【免费下载链接】Netease_url 网易云无损解析 项目地址: https://gitcode.com/gh_mirrors/ne/Netease_url 你是否曾在制作音乐混剪时，因找不到高解析度音频素材而妥协？是否为整理多…...
3大突破！网盘下载加速工具让你的文件获取效率倍增
3大突破！网盘下载加速工具让你的文件获取效率倍增 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘…...