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

解锁 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关机后&#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 扩展 …...

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

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

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

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

Java Spring boot 篇:常用注解

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

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

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

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

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

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 开发中&#xff0c;我们的项目会包含各种类型的文件&#xff0c;如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件&#xff0c;以便在浏览器中高效加载。它就像…...

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

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

Mathtype安装入门指南

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

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

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

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

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

Redis7——基础篇(三)

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

深度学习中的知识蒸馏

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

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

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

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

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

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

微服务通信安全:深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

python读取SQLite表个并生成pdf文件

代码用于创建含50列的SQLite数据库并插入500行随机浮点数据&#xff0c;随后读取数据&#xff0c;通过ReportLab生成横向PDF表格&#xff0c;包含格式化&#xff08;两位小数&#xff09;及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...