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

解锁 JavaScript 异步编程：Promise 链式操作、async/await 与 Promise.all 深度剖析

news 2026/4/30 14:14:23

1.引言

在 JavaScript 的世界里，异步编程是一个核心且关键的概念。随着 Web 应用的复杂度不断提升，处理多个异步操作的需求也日益增长。传统的回调函数方式容易陷入 “回调地狱”，让代码的可读性和可维护性大打折扣。而 Promise 的出现为异步编程带来了新的曙光，后续又衍生出了 async/await 语法糖以及 Promise.all 等实用方法。今天，我们就来深入探讨这三者在异步编程中的应用和区别。

2.Promise 链式操作：异步操作的有序舞蹈

基本原理

Promise 是一个表示异步操作最终完成或失败及其结果的对象。它有三种状态：进行中（pending）、已成功（fulfilled）和已失败（rejected）。Promise 链式操作通过 .then() 方法来依次处理异步操作的结果，每个 .then() 方法都会返回一个新的 Promise 对象，从而可以继续链式调用。

<!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><!-- 目标:使用 Promise 链式调用，解决回调函数地狱问题做法:每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来目标:把回调函数嵌套代码，改成Promise链式调用结构需求:获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中--><form><span>省份：</span><select><option class="province"></option></select><span>城市：</span><select><option class="city"></option></select><span>地区：</span><select><option class="area"></option></select></form><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>//全局变量let pname = ''//1.获取省份Promise对象axios({url: 'https://hmajax.itheima.net/api/province'}).then(result => {console.log(result.data.list);pname = result.data.list[0]document.querySelector('.province').innerHTML = pname//2.得到-获取城市Promise对象return axios({url: 'https://hmajax.itheima.net/api/city',params: {pname//pname:pname}})}).then(result => {let cname = result.data.list[0]console.log(result.data.list);document.querySelector('.city').innerHTML = cname//3.得到-获取地区Promise对象return axios({url: 'https://hmajax.itheima.net/api/area',params: {pname,cname}})}).then(result => {console.log(result);document.querySelector('.area').innerHTML = result.data.list[0]})</script>
</body></html>

优缺点分析

优点是可以将多个异步操作按顺序依次执行，避免了回调函数的嵌套，一定程度上提高了代码的可读性。缺点是当异步操作较多时，链式调用会变得冗长，并且错误处理集中在 .catch() 方法中，难以精准定位错误发生的位置

3.async/await：异步代码的同步之美

基本原理

async/await 是 ES2017 引入的语法糖，建立在 Promise 之上。async 用于定义一个异步函数，该函数总是返回一个 Promise。await 只能在 async 函数内部使用，它会暂停 async 函数的执行，直到等待的 Promise 被解决，并返回其结果。

相关文章：

解锁 JavaScript 异步编程：Promise 链式操作、async/await 与 Promise.all 深度剖析

1.引言 在 JavaScript 的世界里，异步编程是一个核心且关键的概念。随着 Web 应用的复杂度不断提升，处理多个异步操作的需求也日益增长。传统的回调函数方式容易陷入 “回调地狱”，让代码的可读性和可维护性大打折扣。而 Promise 的出现为异步编程带来了新的曙光，后续又衍生…...

编程日记 2025/2/19 11:11:35

Centos虚拟机扩展磁盘空间

Centos虚拟机扩展磁盘空间 扩展前后效果1 虚拟机vmware关机后&#xff0c;编辑2 扩展2.1 查看2.2 新建分区2.3 格式化新建分区ext42.3.1 格式化2.3.2 创建2.3.3 修改2.3.4 查看 2.4 扩容2.4.1 扩容2.4.1 查看 扩展前后效果 df -h1 虚拟机vmware关机后&#xff0c;编辑 2 扩展 …...

编程日记 2025/2/19 11:08:30

记录一次部署PC端网址全过程

当我查看我之前写的文章时、顿时惊奇发出感慨&#xff1a;啥时候写的&#xff1f;是我写的么&#xff1f;疑惑重重… 所以说&#xff0c;好记性不如烂笔头。 记录一次部署PC端网址全过程 部署PC端网址分是三步&#xff1a;第一步&#xff1a;申请域名并映射到外网IP &#xff0…...

编程日记 2025/2/19 11:07:29

利用 OpenCV 进行棋盘检测与透视变换

利用 OpenCV 进行棋盘检测与透视变换 1. 引言 在计算机视觉领域&#xff0c;棋盘检测与透视变换是一个常见的任务&#xff0c;广泛应用于 摄像机标定、文档扫描、增强现实&#xff08;AR&#xff09; 等场景。本篇文章将详细介绍如何使用 OpenCV 进行 棋盘检测&#xff0c;并…...

编程日记 2025/2/19 11:06:27

Java Spring boot 篇：常用注解

Configuration 作用 Configuration 注解的核心作用是把一个类标记为 Spring 应用上下文里的配置类。配置类就像一个 Java 版的 XML 配置文件&#xff0c;能够在其中定义 Bean 定义和 Bean 之间的依赖关系。当 Spring 容器启动时&#xff0c;会扫描这些配置类&#xff0c;解析其…...

编程日记 2025/2/19 11:02:21

#渗透测试#批量漏洞挖掘#Apache Log4j反序列化命令执行漏洞

免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。 目录 Apache Log4j反序列化命令执行漏洞 一、…...

编程日记 2025/2/19 11:00:18

【Linux】Linux 文件系统——关于inode 不足的相关案例

ℹ️大家好&#xff0c;我是练小杰&#xff0c;今天周二了&#xff0c;明天星期三&#xff0c;还有三天就是星期五了&#xff0c;坚持住啊各位&#xff01;&#xff01;&#xff01;&#x1f606; 本文是对之前Linux文件权限中的inode号进行实例讨论&#xff0c;看到博客有错误…...

编程日记 2025/2/19 10:56:14

k8s集群如何赋权普通用户仅管理指定命名空间资源

文章目录 1. 普通用户2. 创建私钥3. 创建 CertificateSigningRequest4. 批准 CertificateSigningRequest5. 创建 kubeconfig6. 创建角色和角色绑定7. 测试 1. 普通用户 创建用户demo useradd demo2. 创建私钥 下面的脚本展示了如何生成 PKI 私钥和 CSR。 设置 CSR 的 CN 和 …...

编程日记 2025/2/19 10:52:06

工控网络安全介绍 工控网络安全知识题目

31.PDR模型与访问控制的主要区别(A) A、PDR把对象看作一个整体 B、PDR作为系统保护的第一道防线 C、PDR采用定性评估与定量评估相结合 D、PDR的关键因素是人 32.信息安全中PDR模型的关键因素是(A) A、人 B、技术 C、模型 D、客体 33.计算机网络最早出现在哪个年代(B) A、20世…...

编程日记 2025/2/19 10:50:00

AIGC（生成式AI）试用 21 -- Python调用deepseek API

1. 安装openai pip3 install openai########################## Collecting openaiUsing cached openai-1.61.1-py3-none-any.whl.metadata (27 kB) Collecting anyio<5,>3.5.0 (from openai)Using cached anyio-4.8.0-py3-none-any.whl.metadata (4.6 kB) Collecting d…...

编程日记 2025/2/19 10:46:55

跨平台AES/DES加密解密算法【超全】

算法说明 要实现在 WinForm、Android、iOS、Vue3 中使用 相同的算法，确保各平台加密结果互通 一、统一加密参数 算法: AES-256-CBC 密钥: 32字节（示例中使用固定字符串生成） IV: 16字节 填充模式: PKCS7 字符编码: UTF-8 输出格式: Base64二、各平台实现代码...

编程日记 2025/2/19 10:45:54

Webpack 基础入门

一、Webpack 是什么 Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中&#xff0c;我们的项目会包含各种类型的文件&#xff0c;如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件&#xff0c;以便在浏览器中高效加载。它就像…...

编程日记 2025/2/19 10:39:46

deepseek-v3在阿里云和腾讯云的使用中的差异

随着deepseek在各大云商上线&#xff0c;试用了下阿里云和腾讯云的deepseek服务&#xff0c;在回答经典数学问题9.9和9.11谁大时&#xff0c;发现还是有差异的。将相关的问题记录如下。 1、问题表现 笔者使用的openai的官方sdk go-openai。 因本文中测验主要使用阿里云和腾讯…...

编程日记 2025/2/19 10:38:44

Mathtype安装入门指南

Mathtype安装入门指南 1 mathtype安装及补丁2 mathtype在word中加载3 常见的mathtype快捷命令4 实列测试 1 mathtype安装及补丁 下载相应的Mathtype7.4软件安装包&#xff0c;百度网盘链接为&#xff1a; 百度网盘链接下载完成后&#xff0c;有三个软件&#xff0c;如下图所示…...

编程日记 2025/2/19 10:36:41

使用 Apache PDFBox 提取 PDF 中的文本和图像

在许多应用中&#xff0c;我们需要从 PDF 文件中提取文本内容和嵌入的图像。为了实现这一目标&#xff0c;Apache PDFBox 是一个非常实用的开源工具库。它提供了丰富的 API&#xff0c;可以帮助我们轻松地读取 PDF 文件、提取其中的文本、图像以及其他资源。 本文将介绍如何使…...

编程日记 2025/2/19 10:32:35

【js逆向_入门】图灵爬虫练习平台 第四题

(base64解码&#xff09;地址&#xff1a;aHR0cHM6Ly9zdHUudHVsaW5ncHl0b24uY24vcHJvYmxlbS1kZXRhaWwvNC8 请求接口带有加密参数&#xff1a; 全局搜索Sign,找到参数生成位置 一目了然&#xff0c;知道参数是怎么构造生成的 调试代码 测试验证思路是否正确 时间&#xff1a; …...

编程日记 2025/2/19 10:29:31

Redis7——基础篇（三）

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09;Redis&#xff08;二&#xff09; 接上期内容&#xff1a;上期完成了Redis的基本…...

编程日记 2025/2/19 10:25:25

深度学习中的知识蒸馏

大家好&#xff0c;我是小青 今天给大家分享神经网络中的一个关键概念&#xff0c;知识蒸馏 知识蒸馏&#xff08;Knowledge Distillation&#xff09;是一种模型压缩技术&#xff0c;旨在将大型、复杂的模型&#xff08;通常称为教师模型&#xff09;的知识迁移到小型、简单…...

编程日记 2025/2/19 10:20:19

【Windows软件 - HeidiSQL】导出数据库

HeidSQL导出数据库 软件信息 具体操作 示例文件 选项分析 选项&#xff08;1&#xff09; 结果&#xff08;1&#xff09; -- -------------------------------------------------------- -- 主机: 127.0.0.1 -- 服务器版本: …...

编程日记 2025/2/19 10:19:18

苏剑林“闭门造车”之多模态思路浅谈思考

原文来自科学空间苏剑林 “闭门造车”之多模态思路浅谈&#xff08;一&#xff09;&#xff1a;无损输入和“闭门造车”之多模态思路浅谈&#xff08;二&#xff09;&#xff1a;自回归&#xff0c;学习后总结。 文章目录 “闭门造车”之多模态思路浅谈&#xff08;一&#xff…...

编程日记 2025/2/19 10:14:12

3个关键步骤：在Windows上轻松安装APK文件的终极解决方案

3个关键步骤&#xff1a;在Windows上轻松安装APK文件的终极解决方案 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想过&#xff0c;在Windows电脑上直接安…...

编程新知 2026/4/30 14:07:21

【YOLOv11】072、YOLOv11少样本学习：极少量标注数据下的模型训练

深夜实验室里的困境 上周三凌晨两点，隔壁工位的算法工程师小张盯着屏幕叹气。他手里有个新项目：产线上新增了三种缺陷类型，每种缺陷只有不到30张标注图片，产线经理却要求下周上线检测模型。他尝试用标准的YOLOv11训练流程，结果验证集mAP始终卡在0.2左右，模型要么过拟合严…...

编程新知 2026/4/30 12:33:59

5分钟完成APA第7版引用格式：Word样式一键安装终极指南

5分钟完成APA第7版引用格式&#xff1a;Word样式一键安装终极指南 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 在学术写作领域&#xff0c;规范的参…...

编程新知 2026/4/30 10:45:29

别再傻傻分不清了！嵌入式开发中PCM与I2S接口的实战选择指南（附时序图详解）

嵌入式音频开发实战&#xff1a;PCM与I2S接口的硬件设计决策指南 当你在STM32的参考手册里翻到"音频接口"章节时&#xff0c;总会遇到那个经典选择题&#xff1a;该用PCM还是I2S连接外部Codec&#xff1f;这个看似简单的选择&#xff0c;可能让你的PCB改版三次——我…...

编程新知 2026/4/30 10:35:12

照片换背景的免费软件有哪些？2026年最全工具推荐

最近有个朋友问我&#xff0c;想给全家福换个背景&#xff0c;但又不想花钱买软件。我就想到了一个问题&#xff1a;**照片换背景的免费软件有哪些&#xff1f;**其实这个需求特别常见&#xff0c;无论是制作证件照、电商产品图&#xff0c;还是日常修图&#xff0c;都可能需要…...

编程新知 2026/4/30 9:44:14

超越基础教程：用VPI+Matlab实现高阶QAM相干光通信系统的DSP算法实战

超越基础教程&#xff1a;用VPIMatlab实现高阶QAM相干光通信系统的DSP算法实战 在光通信领域&#xff0c;高阶QAM&#xff08;正交幅度调制&#xff09;技术因其高频谱效率而备受关注。然而&#xff0c;随着调制阶数的提升&#xff0c;系统对信号处理算法的要求也呈指数级增长。…...

编程新知 2026/4/30 7:45:23

终极B站视频下载指南：DownKyi免费工具的完整使用教程

终极B站视频下载指南&#xff1a;DownKyi免费工具的完整使用教程 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&#x…...

编程新知 2026/4/30 7:43:22

2026 数字孪生空间智能服务商 TOP10 综合实力榜单

评价维度&#xff1a;技术自研度、空间智能深度、全栈能力、标杆案例、市场份额、信创适配&#xff08;满分 100&#xff09; 1. 51WORLD&#xff08;五一视界&#xff0c;6651.HK&#xff09; 评分&#xff1a;95 | 定位&#xff1a;全栈自研的空间智能基础设施服务商 核心技…...

编程新知 2026/4/30 7:36:59

别再只盯着CPK了！用Excel快速计算过程能力指数与合格率（附标准正态分布表查法）

用Excel解锁过程能力分析&#xff1a;从CPK计算到合格率预测的实战指南 每天面对成堆的生产数据&#xff0c;你是否还在为繁琐的统计计算头疼&#xff1f;质量工程师张工最近发现&#xff0c;车间里90%的同事仍然依赖专业统计软件或手工计算过程能力指数&#xff0c;既耗时又容…...

编程新知 2026/4/30 7:22:15

【专利视点】光华经典案例九：“公开不充分”的案件获得授权

近年来&#xff0c;中国越来越重视创新及创新保护&#xff0c;越来越重视知识产权工作。知识产权已成为国家战略、高质量发展核心要素&#xff0c;也是企业赢得市场竞争、全球化布局的有力工具。恰逢上海光华专利事务所成立20周年&#xff0c;本所从代理的众多案例中精心选编了…...

编程新知 2026/4/30 6:45:39