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

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

news 2026/2/9 1:31:06

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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2026/1/31 12:27:36

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12