解锁 JavaScript 异步编程：Promise 链式操作、async/await 与 Promise.all 深度剖析
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 的出现为异步编程带来了新的曙光，后续又衍生…...
Centos虚拟机扩展磁盘空间
Centos虚拟机扩展磁盘空间 扩展前后效果1 虚拟机vmware关机后，编辑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关机后，编辑 2 扩展 …...
记录一次部署PC端网址全过程
当我查看我之前写的文章时、顿时惊奇发出感慨：啥时候写的？是我写的么？疑惑重重… 所以说，好记性不如烂笔头。 记录一次部署PC端网址全过程 部署PC端网址分是三步：第一步：申请域名并映射到外网IP ࿰…...
利用 OpenCV 进行棋盘检测与透视变换
利用 OpenCV 进行棋盘检测与透视变换 1. 引言 在计算机视觉领域，棋盘检测与透视变换是一个常见的任务，广泛应用于 摄像机标定、文档扫描、增强现实（AR） 等场景。本篇文章将详细介绍如何使用 OpenCV 进行 棋盘检测，并…...
Java Spring boot 篇：常用注解
Configuration 作用 Configuration 注解的核心作用是把一个类标记为 Spring 应用上下文里的配置类。配置类就像一个 Java 版的 XML 配置文件，能够在其中定义 Bean 定义和 Bean 之间的依赖关系。当 Spring 容器启动时，会扫描这些配置类，解析其…...
#渗透测试#批量漏洞挖掘#Apache Log4j反序列化命令执行漏洞
免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。 目录 Apache Log4j反序列化命令执行漏洞 一、…...
【Linux】Linux 文件系统——关于inode 不足的相关案例
ℹ️大家好，我是练小杰，今天周二了，明天星期三，还有三天就是星期五了，坚持住啊各位！！！😆 本文是对之前Linux文件权限中的inode号进行实例讨论，看到博客有错误…...
k8s集群如何赋权普通用户仅管理指定命名空间资源
文章目录 1. 普通用户2. 创建私钥3. 创建 CertificateSigningRequest4. 批准 CertificateSigningRequest5. 创建 kubeconfig6. 创建角色和角色绑定7. 测试 1. 普通用户 创建用户demo useradd demo2. 创建私钥 下面的脚本展示了如何生成 PKI 私钥和 CSR。 设置 CSR 的 CN 和 …...
工控网络安全介绍 工控网络安全知识题目
31.PDR模型与访问控制的主要区别(A) A、PDR把对象看作一个整体 B、PDR作为系统保护的第一道防线 C、PDR采用定性评估与定量评估相结合 D、PDR的关键因素是人 32.信息安全中PDR模型的关键因素是(A) A、人 B、技术 C、模型 D、客体 33.计算机网络最早出现在哪个年代(B) A、20世…...
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…...
跨平台AES/DES加密解密算法【超全】
算法说明 要实现在 WinForm、Android、iOS、Vue3 中使用 相同的算法，确保各平台加密结果互通 一、统一加密参数 算法: AES-256-CBC 密钥: 32字节（示例中使用固定字符串生成） IV: 16字节 填充模式: PKCS7 字符编码: UTF-8 输出格式: Base64二、各平台实现代码...
Webpack 基础入门
一、Webpack 是什么 Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中，我们的项目会包含各种类型的文件，如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像…...
deepseek-v3在阿里云和腾讯云的使用中的差异
随着deepseek在各大云商上线，试用了下阿里云和腾讯云的deepseek服务，在回答经典数学问题9.9和9.11谁大时，发现还是有差异的。将相关的问题记录如下。 1、问题表现 笔者使用的openai的官方sdk go-openai。 因本文中测验主要使用阿里云和腾讯…...
Mathtype安装入门指南
Mathtype安装入门指南 1 mathtype安装及补丁2 mathtype在word中加载3 常见的mathtype快捷命令4 实列测试 1 mathtype安装及补丁 下载相应的Mathtype7.4软件安装包，百度网盘链接为： 百度网盘链接下载完成后，有三个软件，如下图所示…...
使用 Apache PDFBox 提取 PDF 中的文本和图像
在许多应用中，我们需要从 PDF 文件中提取文本内容和嵌入的图像。为了实现这一目标，Apache PDFBox 是一个非常实用的开源工具库。它提供了丰富的 API，可以帮助我们轻松地读取 PDF 文件、提取其中的文本、图像以及其他资源。 本文将介绍如何使…...
【js逆向_入门】图灵爬虫练习平台 第四题
(base64解码）地址：aHR0cHM6Ly9zdHUudHVsaW5ncHl0b24uY24vcHJvYmxlbS1kZXRhaWwvNC8 请求接口带有加密参数： 全局搜索Sign,找到参数生成位置 一目了然，知道参数是怎么构造生成的 调试代码 测试验证思路是否正确 时间： …...
Redis7——基础篇（三）
前言：此篇文章系本人学习过程中记录下来的笔记，里面难免会有不少欠缺的地方，诚心期待大家多多给予指教。 基础篇： Redis（一）Redis（二） 接上期内容：上期完成了Redis的基本…...
深度学习中的知识蒸馏
大家好，我是小青 今天给大家分享神经网络中的一个关键概念，知识蒸馏 知识蒸馏（Knowledge Distillation）是一种模型压缩技术，旨在将大型、复杂的模型（通常称为教师模型）的知识迁移到小型、简单…...
【Windows软件 - HeidiSQL】导出数据库
HeidSQL导出数据库 软件信息 具体操作 示例文件 选项分析 选项（1） 结果（1） -- -------------------------------------------------------- -- 主机: 127.0.0.1 -- 服务器版本: …...
苏剑林“闭门造车”之多模态思路浅谈思考
原文来自科学空间苏剑林 “闭门造车”之多模态思路浅谈（一）：无损输入和“闭门造车”之多模态思路浅谈（二）：自回归，学习后总结。 文章目录 “闭门造车”之多模态思路浅谈（一ÿ…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
Unity中的transform.up
2025年6月8日，周日下午 在Unity中，transform.up是Transform组件的一个属性，表示游戏对象在世界空间中的“上”方向（Y轴正方向），且会随对象旋转动态变化。以下是关键点解析： 基本定义 transfor…...
spring Security对RBAC及其ABAC的支持使用
RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型，它将权限分配给角色，再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...