解锁 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 -- 服务器版本: …...
苏剑林“闭门造车”之多模态思路浅谈思考
原文来自科学空间苏剑林 “闭门造车”之多模态思路浅谈（一）：无损输入和“闭门造车”之多模态思路浅谈（二）：自回归，学习后总结。 文章目录 “闭门造车”之多模态思路浅谈（一ÿ…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...