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

JavaScript 异步编程与请求取消全指南

news 来源：原创 2025/6/29 9:11:22

JavaScript 异步编程与请求取消全指南

涵盖：同步/异步、Promise、async/await、AbortController、前后端协作

一、同步与异步

1. 同步（Synchronous）

定义：代码按顺序执行，前一步完成才能执行下一步。
特点：阻塞主线程，适合简单逻辑。

示例：

console.log("步骤1");  
console.log("步骤2"); // 必须等待步骤1完成

2. 异步（Asynchronous）

定义：代码非阻塞执行，任务完成后通过回调、Promise 或事件通知结果。
特点：高效但复杂度高，适合网络请求、I/O 操作。

示例：

setTimeout(() => console.log("异步任务"), 1000);  
console.log("继续执行"); // 立即执行

二、Promise 核心知识

1. 基本概念

状态：Pending（进行中）、Fulfilled（成功）、Rejected（失败）。

创建与使用：

const promise = new Promise((resolve, reject) => {setTimeout(() => resolve("成功"), 1000);
});
promise.then(result => console.log(result));

2. 链式调用与静态方法

链式调用：

fetch(url).then(response => response.json()).catch(error => console.error(error));

静态方法：
- Promise.all()：所有成功返回结果数组。
- Promise.race()：返回第一个完成的结果。

三、async/await 进阶

1. 基本用法

async 函数：隐式返回 Promise。

await：等待 Promise 完成并提取结果。

async function fetchData() {const data = await fetch(url);return data.json();
}

2. 错误处理

try...catch：捕获异步错误。

async function safeFetch() {try {const data = await fetch(url);} catch (error) {console.error("请求失败:", error);}
}

3. 并发控制

串行：

await task1();  
await task2(); // 等待 task1 完成

并行：

const [res1, res2] = await Promise.all([task1(), task2()]);

四、请求取消：AbortController

1. 核心功能

中断异步操作（如 fetch 请求）。
核心对象：
- AbortController：生成中断信号。
- AbortSignal：传递给异步任务。

2. 使用示例

const controller = new AbortController();// 发起请求并传递信号
fetch(url, { signal: controller.signal }).catch(error => {if (error.name === "AbortError") {console.log("请求已取消");}});// 用户点击取消按钮
document.getElementById("cancel-btn").onclick = () => controller.abort();

3. 超时自动取消

async function fetchWithTimeout(url, timeoutMs) {const controller = new AbortController();const timeoutId = setTimeout(() => controller.abort(), timeoutMs);try {const response = await fetch(url, { signal: controller.signal });clearTimeout(timeoutId); // 请求成功时清除定时器return response.json();} catch (error) {if (error.name === "AbortError") {throw new Error(`超时（${timeoutMs}ms）`);}}
}

五、后端处理请求取消（Java/Spring Boot）

1. 默认行为

客户端断开后，服务器继续执行任务。

示例：

@GetMapping("/data")
public String longTask() throws InterruptedException {Thread.sleep(5000); // 即使客户端断开仍会执行return "完成";
}

2. 主动终止任务

监听连接中断（使用 DeferredResult）：

@GetMapping("/async")
public DeferredResult<String> asyncTask() {DeferredResult<String> deferredResult = new DeferredResult<>();Future<?> future = executor.submit(() -> {try {Thread.sleep(5000);deferredResult.setResult("完成");} catch (InterruptedException e) {deferredResult.setErrorResult("已取消");}});// 客户端断开时取消任务deferredResult.onCompletion(() -> future.cancel(true));return deferredResult;
}

3. 数据库查询超时

@Query(value = "SELECT * FROM large_table", timeout = 5) // 5秒超时
List<Record> findLargeData();

六、关键问题解答

1. 客户端取消请求后，后端是否继续执行？

默认继续执行，需后端主动监听连接中断事件并终止任务。

2. 为什么需要 `async` 函数？

语法要求：await 必须在 async 函数内使用。
隐式返回 Promise：方便异步操作的值传递。

3. 如何避免回调地狱？

使用 Promise 链式调用或 async/await。

七、最佳实践

前端：
- 使用 AbortController 取消不再需要的请求。
- 超时设置避免长时间等待。
后端：
- 监听客户端断开事件，终止耗时操作。
- 数据库操作设置查询超时。
通用：
- 关键业务设计幂等性逻辑（如支付去重）。

总结：异步编程需兼顾效率与资源管理，合理使用取消机制可显著提升应用性能和用户体验。

JavaScript 异步编程与请求取消全指南

JavaScript 异步编程与请求取消全指南涵盖：同步/异步、Promise、async/await、AbortController、前后端协作一、同步与异步 1. 同步（Synchronous） 定义：代码按顺序执行，前一步完成才能执行下一步。特点&#xff1…...

编程日记 2025/6/29 9:11:22

Redis 核心应用场景

高性能缓存 Redis 作为内存数据库，读写性能可达10万 QPS，适合缓存热点数据（如商品详情、用户会话），显著降低数据库压力。通过设置过期时间（TTL）自动清理非热点数据，推荐结合allkeys-…...

编程日记 2025/6/29 9:15:09

KMS工作原理及其安全性分析

在当今数字化时代，数据安全已经成为企业和个人最为关注的话题之一。随着云计算和大数据的快速发展，如何安全地管理密钥成为了一个重要的挑战。KMS（Key Management Service，密钥管理服务）作为一种专业的密钥管理解决方案…...

编程日记 2025/6/29 9:11:51

施磊老师基于muduo网络库的集群聊天服务器(六)

文章目录客户端开发开始客户端首页面功能为何不逐行开发？客户端CMake代码搭配知识补充--有很多漏的客户端main-登录,注册,退出群组有问题测试客户端好友添加与聊天功能表驱动设计：commandMapcommandHandlerMap为什么都是int, string添加好友和聊天功能…...

编程日记 2025/6/29 9:11:25

有关字体，语言，字符编码相关的基础知识，询问chatgpt所得

学习这个知识点的背景是，我需要做一个在canvas 上书写矢量文本的功能， 使用opentype来加载字体文件，并将内容转换为 svg，导入画布。但是有些字体文件是不包含一些其他语言的字符的。就可能出现 “无效字符”。花了点时间研究…...

编程日记 2025/6/29 11:20:46

Obsidian和Ollama大语言模型的交互过程

之前的文章中介绍了Obsidian配合Ollama的使用案例，那么它们是如何配合起来的呢？其实这个问题并不准确，问题的准确描述应该是Obsidian的Copilot插件是如何与Ollama大语言模型交互的。因为Obsidian在这里只是一个载体，核心功能还是C…...

编程日记 2025/6/29 9:11:35

架构-数据库系统

数据库系统一、数据库系统概述 （一）课程核心模块覆盖数据库设计、关系代数、规范化理论、数据控制四大核心模块，旨在构建从理论到实践的完整知识体系至。 （二）典型应用场景数据管理：学生信息管理&a…...

编程日记 2025/6/29 9:13:03

【C到Java的深度跃迁：从指针到对象，从过程到生态】第三模块·面向对象深度进化 —— 第十二章接口：比C函数指针更强大的契约

一、从函数指针到接口契约 1.1 C函数指针的本质限制 C语言通过函数指针实现回调机制，但存在根本性缺陷： 回调函数示例： typedef void (*Logger)(const char*); void process_data(int data, Logger logger) { // ... logger("Pro…...

编程日记 2025/6/29 12:23:46

【HFP】蓝牙语音通话控制深度解析：来电拒接与通话终止协议

目录一、来电拒接的核心流程与信令交互 1.1 拒接场景的分类与触发条件 1.2 HF 端拒接流程 1.3 AG 端拒接流程二、通话终止流程：主动断开与异常中断 2.1 终止场景的界定 2.2 HF 端终止流程 2.3 AG 端终止流程三、信令协议的核心要素：AT 命令与…...

编程日记 2025/6/29 10:22:24

linux 中断子系统层级中断编程

虚拟中断控制器代码： #include<linux/kernel.h> #include<linux/module.h> #include<linux/clk.h> #include<linux/err.h> #include<linux/init.h> #include<linux/interrupt.h> #include<linux/io.h> #include<linu…...

编程日记 2025/6/29 9:14:17

continue插件实现IDEA接入本地离线部署的deepseek等大模型

文章目录前言一、IDEA安装continue二、continue部署本地大模型三、continue聊天窗口使用deepseek R1四、continue批量接入硅基流动的模型API 前言亲爱的家人们，创作很不容易，若对您有帮助的话，请点赞收藏加关注哦，您的关注是我…...

编程日记 2025/6/29 9:11:33

Redis-缓存应用本地缓存与分布式缓存的深度解析

Redis缓存场景与策略：本地缓存与分布式缓存的深度解析在当今高并发、低延迟的互联网架构中，缓存技术是优化系统性能的核心手段之一。Redis作为分布式缓存的标杆，与本地缓存共同构成了缓存体系的两大支柱。然而，两者的适用场景与…...

编程日记 2025/6/29 9:12:49

关于按键映射软件的探索（其一）

那么先说结论——重构了一次，我还是失败了，失败于拓展调整个性化的设计，不过我还是实现了按键监测然后显示的功能。只不过是说我对于WPF软件等的封装和软窗口的功能还是不怎么熟悉。引言在许多游戏玩家中，高难度操作&#xff08…...

编程日记 2025/6/29 11:48:28

测试基础笔记第十一天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、查询连接1.内连接2.左连接3.右连接4.左右连接的必要性5.自关联6.普通查询7.子查询8.子查询充当数据源二、数据库高级扩展内容1.外键2.索引3.验证索引效果案例实…...

编程日记 2025/6/29 9:11:44

优选算法第十讲：字符串

优选算法第十讲：字符串 1.最长公共前缀2.最长回文子串3.二进制求和4.字符串相乘 1.最长公共前缀 2.最长回文子串 3.二进制求和 4.字符串相乘...

编程日记 2025/6/29 9:45:10

RK3588芯片NPU的使用：官方rknn_yolov5_android_apk_demo运行与解读

一、本文的目标本文将完成两项任务：官方的调用摄像头动态目标识别例子运行在rk3588的开发板上。解读源码以增加对rknn开发的认识。二、开发环境说明主机系统：Windows 11目标设备：搭载RK3588芯片的安卓开发板核心工具：Android Studio Koala | 2024.1.1 Patch 2，NDK 27.…...

编程日记 2025/6/29 9:11:26

面试篇：Spring Boot

基础概念 Spring Boot的核心优势是什么？ Spring Boot 的核心优势如下： 自动配置：根据项目中的依赖自动进行配置，减少了大量的手动配置工作。内嵌服务器：内置 Tomcat、Jetty 等容器，应用可以直接运行为一…...

编程日记 2025/6/29 9:11:28

开源漏洞扫描器：OpenVAS

一、OpenVAS介绍 OpenVAS (Open Vulnerability Assessment System) 是一款功能强大的开源漏洞扫描器。它由 Greenbone Networks 开发和维护，是 Greenbone 安全管理器 (GSM) 产品的基础，同时也有免费的社区版本（Greenbone Community Edition&…...

编程日记 2025/6/29 11:46:31

PCB封装主要组成元素

PCB（Printed Circuit Board，印刷电路板）封装是指将电子元件固定在 PCB 上，并实现电气连接的方式。主要包括以下几类。 1. 焊盘（Pad） 作用：焊盘是 PCB 封装中最重要的元素之一，它是…...

编程日记 2025/6/29 9:14:02

STC8H DMA 串口1全双工中断方式收发通讯C语言

/************* 功能说明 ************** 本例程基于STC8H8K64U为主控芯片的实验箱9进行编写测试，STC8H系列带DMA模块的芯片可通用参考. 串口1全双工中断方式收发通讯程序。通过PC向MCU发送数据, MCU将收到的数据自动存入DMA空间. 当DMA空间存满设置大小的…...

编程日记 2025/6/29 9:16:11

考研英一学习笔记

2024 年全国硕士研究生招生考试英语（一）试题 （科目代码：201） Section Ⅰ Use of English Directions: Read the following text. Choose the best word(s) for each numbered blank and mark A, B, C or D on the ANS…...

编程日记 2025/6/29 9:11:43

BeanFactory Spring之BeanFactory什么是BeanFactoryApplicationContext相对BeanFactory实现的功能性扩展1. MessageSource2. ResourcePatternResolver3. ApplicationEventPublisher4. EnvironmentCapable通用ApplicationContext实践实现BeanFactoryBeanFactory后处理器排序让谁…...

编程日记 2025/6/29 9:12:38

半导体---检测和量测

目录 1.简介2.AOI(检测) 1.简介半导体晶圆制造前道量测和检测设备。公司产品涵盖光学薄膜量测、光学关键尺寸量测、光学衍射套刻量测、光学集成量测、X射线薄膜量测、X射线材料性能量测、X射线成分及表面污染量测等系列产品及解决方案。半导体领域的量测和AOI如同半导体制造…...

编程日记 2025/6/29 9:11:27

CentOS 7 磁盘分区详细教程

CentOS 7 磁盘分区详细教程在服务器管理和运维过程中，磁盘分区是一项基础且重要的操作。合理的磁盘分区可以提高数据存储的安全性、高效性，方便系统管理与维护。本文将详细介绍在 CentOS 7 系统中进行磁盘分区的具体步骤和方法。一、准备工作 1.1 确…...

编程日记 2025/6/29 12:06:03

EasyRTC音视频实时通话在线教育解决方案：打造沉浸式互动教学新体验

一、方案概述 EasyRTC是一款基于WebRTC技术的实时音视频通信平台，为在线教育行业提供了高效、稳定、低延迟的互动教学解决方案。本方案将EasyRTC技术深度整合到在线教育场景中，实现师生间的实时音视频互动等核心功能，打造沉浸式的远程学习体…...

编程日记 2025/6/29 11:37:07

栈（Stack）和队列（Queue）

栈栈（stack）是一种特殊的线性表，只允许在固定的一端进行插入和删除操作。我们可以将栈近似看作一个桶，要取出桶底的元素，就要将桶顶的元素先取出，再将底部元素取出，也可以叫做后进先出。这…...

编程日记 2025/6/29 9:11:31

1、AI及LLM基础：Python语法入门教程

Python语法入门教程这是一份全面的Python语法入门教程，涵盖了注释、变量类型与操作符、逻辑运算、list和字符串、变量与集合、控制流和迭代、模块、类、继承、进阶等内容，通过详细的代码示例和解释，帮助大家快速熟悉Python语法。文章目录 Python语法入门教程一、注释二…...

编程日记 2025/6/29 9:11:29

跨境电商关键词分类打标

你是一名顶级的亚马逊关键词分析专家，你将用你的亚马逊运营专业的经验帮助我做精准的关键词打标。首先你会学习以下的知识内容，以便于你后续的关键词分析。人群词是什么？是指直接描述或定位特定用户群体的关键词或标签，用于精准识别目标受众的身份、需求或行为特征。 …...

编程日记 2025/6/29 9:47:07

C# 结构（Struct）

原文：C# 结构（Struct）_w3cschool 在 C# 中，结构是值类型数据结构。它使得一个单一变量可以存储各种数据类型的相关数据。struct 关键字用于创建结构。结构是用来代表一个记录。假设您想跟踪图书馆中书的动态。您可能想跟踪每本…...

编程日记 2025/6/29 9:16:05

Java Collections工具类指南

一、Collections工具类概述 java.util.Collections是Java集合框架中提供的工具类，包含大量静态方法用于操作和返回集合。这些方法主要分为以下几类： 排序操作查找和替换同步控制不可变集合特殊集合视图其他实用方法二、排序操作 1. 自然排序 List&…...

编程日记 2025/6/29 11:21:26

BBRv2，v3 吞吐为什么不如 BBRv1

为什么 BBRv2/3 测试下来吞吐远不如 2016 年底的 BBRv1，这个事曾经提到过很多次，今天分析一下原理。注意三个事实： BBR 是一种拥塞控制算法；BBR 已经迭代到了 v3 版本；BBRv3 的 “性能” 远不如 BBRv1. 第二点有点不…...

编程日记 2025/6/29 10:22:31

Java集成【邮箱验证找回密码】功能

目录 1.添加依赖 2.选择一个自己的邮箱，作为发件人角色。 3.编写邮箱配置【配置发件人邮箱】 4.编写邮箱配置类 5.编写controller业务代码 6.演示效果 7.总结流程 8.注意结语 1.添加依赖  <dependency><groupId>or…...

编程日记 2025/6/29 11:58:11

Java微服务架构设计与实践 - 面试实战

Java微服务架构设计与实践 - 面试实战在互联网大厂的Java求职者面试中，微服务架构设计是一个常见的考察点。本文通过严肃的面试官和资深Java架构师马架构之间的对话，详细展示了如何回答SpringCloud相关的核心技术问题。第一轮提问面试官&#xff1…...

编程日记 2025/6/29 10:16:59

Java后端开发面试题(含答案）

在广州一个小公司（BOSS标注是20-99人，薪资2-3k左右)，直接面试没有笔试，按流程自我介绍，然后直接拿着简历问项目场景，问题是结合场景题和八股文。废话不多说，直接分享面试题目个大家做参考。 1、…...

编程日记 2025/6/29 10:58:42

Sharding-JDBC 系列专题 - 第九篇：高可用性与集群管理

Sharding-JDBC 系列专题 - 第九篇：高可用性与集群管理本系列专题旨在帮助开发者全面掌握 Sharding-JDBC，一个轻量级的分布式数据库中间件。本篇作为系列的第九篇文章，将重点探讨高可用性（High Availability, HA）和集群管理，包括数据库高可用方案、Sharding-JDBC 的故…...

编程日记 2025/6/1 8:48:24

Node.js 学习入门指南

Node.js 学习入门指南 Node.js 是一种流行的开源、跨平台的 JavaScript 运行时环境，它使开发者能够在服务器端运行JavaScript代码。本篇文章旨在帮助初学者快速入门并掌握Node.js的基础知识和常用技巧。一、什么是Node.js？ 定义 Node.js 是一个基于…...

编程日记 2025/6/29 9:13:21

数智视融合驱动未来，Al+数字孪生重塑价值｜2025袋鼠云春季数智发布会回顾

4月16日，袋鼠云成功举办了“做DataAI的长期主义者——2025年袋鼠云春季数智发布会”，从智能分析决策平台到AI大模型应用，从数字孪生中枢到AI增强型数字世界，勾勒出企业数智化转型的进化图谱，真正实现AI赋能企业业务&am…...

编程日记 2025/6/29 11:49:06

nfs服务原理、搭建手册、安全配置建议及异常定位手段

一、NFS服务原理 NFS（Network File System）是一种基于TCP/IP协议的网络文件共享系统，允许客户端像访问本地文件一样访问远程服务器上的共享目录。其核心原理依赖于RPC（Remote Procedure Call）机制，具体流程…...

编程日记 2025/6/29 10:30:46

第十三届蓝桥杯 2022 C/C++组修剪灌木

目录题目： 题目描述： 题目链接： 思路： 核心思路： 思路详解： 代码： 代码详解： 题目： 题目描述： 题目链接： P8781 [蓝桥杯 2022 省 B] 修…...

编程日记 2025/6/29 10:19:32

MySQL：数据库设计

目录一、范式二、第一范式二、第二范式三、第三范式四、设计 （1）一对一关系 （2）一对多关系 （3）多对多关系一、范式数据库的范式是一种规则（规范），如果我们…...

编程日记 2025/6/29 12:13:21

OpenManus与OWL部署及体验报告

OpenManus与OWL对任务的执行结果均不及Manus；二者比较，Owl达成率更高；二者使用过程中均会消耗大量tokens，单个问题成本高。一、部署 OpenManus：https://github.com/mannaandpoem/OpenManus.git OWL：https…...

编程日记 2025/6/29 9:12:39

【Pandas】pandas DataFrame pow

Pandas2.2 DataFrame Binary operator functions 方法描述DataFrame.add(other)用于执行 DataFrame 与另一个对象（如 DataFrame、Series 或标量）的逐元素加法操作DataFrame.add(other[, axis, level, fill_value])用于执行 DataFrame 与另一个对象&…...

编程日记 2025/6/29 9:13:07