前端开发攻略---取消已经发出但是还未响应的网络请求
目录
注意：
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的世界中，去中心化和用户主权的理念正逐渐走向主流，推动了现有商业模式和技术生态系统的深刻变革。区块链技术及其核心应用之一——智能合约，正在促使这一转变的发生。智能合约的主要功能是通过自动化和预设协议执行，以减少…...
LangGraph - Hierarchical Agent Teams
本文翻译整理自 Hierarchical Agent Teams https://langchain-ai.github.io/langgraph/tutorials/multi_agent/hierarchical_agent_teams/ 文章目录 一、前言二、设置三、创建工具四、Helper Utilities五、定义代理 Team研究 Team文档写作Team 六、添加图层 一、前言 在前面的…...
2021-04-14 proteus中仿真时74HC245三态双向端口扩展输出
缘由proteus中仿真时74HC245输出时电平显示灰色（不确定电平状态）是为什么？-编程语言-CSDN问答 缘由C语言翻译单片机开关检测器-编程语言-CSDN问答 参考74ls245的工作原理及作用详解 - 电子发烧友网 参考74ls245_百度百科...
解决UNSPSC商品分类的层级不足的方法
《联合国标准产品和服务守则》（UNSPSC）是一个分层框架，旨在对产品和服务进行分类。其主要目标是通过提供统一的方法来对产品和服务进行分类，从而简化采购和供应链管理。 虽然 UNSPSC 有效地将产品分为各种商品类别，但…...
Pytest基于fixture的参数化及解决乱码问题
我们知道，Pytest是Python技术栈下进行自动化测试的主流测试框架。支持灵活的测试发现、执行策略，强大的Fixture夹具和丰富的插件支持。 除了通过pytest的parametrize标签进行参数化外，我们通过fixture的param参数也可以比较方便地实现参数化…...
使用excel.js（layui-excel）进行layui多级表头导出，根据单元格内容设置背景颜色，并将导出函数添加到toolbar
本段是菜狗子的碎碎念，解决办法请直接从第二段开始看。layui多级表头的导出，弄了两天才搞定，中途一度想放弃，还好坚持下来了。一开始用的是layui的toolbar里自带的那个导出，但是多级表头没有正常导出，单元格…...
Mysql 5.7 安装与卸载(非常详细)
一、环境介绍 操作系统：CentOS 7 MySQL：5.7 二、MySQL卸载 # 查看软件 rpm -qa|grep mysql # 卸载MySQL yum remove -y mysql mysql-libs mysql-common rm -rf /var/lib/mysql rm /etc/my.cnf 继续查看是否还有 MySQL 软件，有的话继续删…...
030 elasticsearch查询、聚合
文章目录 查询聚合查询RestHighLevelClientElasticsearchRestTemplat SpringData对ES客户端的封装：ElasticsearchRestTemplate SpringData对CRUD的封装：ElasticsearchRepository 原生ES客户端：RestHighLevelClient 查询 package com.xd.cube…...
前端工程启动工具
一些思考 在公司项目中，需要启一个新的前端工程（一个基于Webpack的React工程）。因为同一个项目中有其他的前端工程，我们最开始想的是参考另外一个工程的配置重启一个新的工程，但是又因为原来的工程用的库版本都比较老…...
游戏逆向基础-跳出游戏线程发包
附加游戏后下断点 bp ws2_32.send send函数断下后，可以看到数据地址每次都一样 可以说明这个游戏是线程发包，所以直接在数据窗口中转到这个地址，然后对这个地址下硬件写入断点。 下了硬件写入断点后可以一层一层往上面跟，确定写…...
做海外网站需要准备什么
一，购买域名 在租用国外服务器之前，您需要购买域名。域名是访问网站的标志，也是网站品牌的一部分。因此，在购买域名时，需要考虑域名的可记忆性、简短性和搜索性，使网站更容易被用户记住。 二，租…...