【JS Promise, Promise.all 与 async/await用法详解】

目录

    • Promise
    • Promise基本使用
    • Promise可进行连续回调
    • Promise回调可接受入参
      • 1.工作原理
    • async/await
    • 总结
      • 参考文档:

异步

 let a = 0setTimeout(() => {a = 1}, 1000)console.log(a) // 0

此时这个延迟就成为异步执行的了,a值还没有变1就被使用输出,我们只能得到0。

Promise

有时候我们不得不进行异步操作,比如从后台请求数据,我们需要时间,等待它得到数据后再使用。

Promise基本使用

new Promise()内接收一个函数,入参为resolve, reject

Promise内的函数将可以执行任意时长,执行到调用resolve()reject(),我们此处把它放在延迟1s后执行,此时a已经被赋值为1,因此就可以得到被赋值后的a。

**resolve()**进入.then也就是执行成功回调,**reject()**进入.catch也就是手动执行错误进入捕获异常,reject()用的较少。

let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve()}, 1000)}).then(() => {console.log(a) //1}).catch(() => {}
)

Promise可进行连续回调

  1. 第一种方式,回调函数中接受返回一个新的Promise进行下一步回调。

  2. 第二种方式,Promise.resolve(res)在res为普通数据时等同于new Promise并且resolve(res)

  3. 第三种也是最常用的,再异步回调中直接返回普通数据也可当作接受了一个新的Promise进行下一步回调

let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)}).then((res) => {return new Promise((resolve, reject) => {resolve(res)})//等同于//return Promise.resolve(res)//等同于//return res}).then((res) => {console.log(res) //1}).catch(() => {})

Promise回调可接受入参

  1. .then中的回调函数可以存在入参,入参为**resolve()**手动传入,此处res便是传入的a值。
  2. .catchreject()的关系与上面两者同理,只不过变成了手动捕捉错误时的回调。
 let a = 0new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)}).then((res) => {console.log(res) //1}).catch(() => {})

Promise.all(promises) ,能够一次并行处理多个 promise,并且只返回一个 promise 实例, 那个输入的所有 promiseresolve 回调的结果是一个数组。

1.工作原理

Promise.all() 是一个内置的辅助函数,接受一组 promise(或者一个可迭代的对象),并返回一个promise :
ini复制代码const allPromise = Promise.all([promise1, promise2, …]);

可以使用 then 方法提取第一个 promise 的值:

allPromise.then((values) => {values; // [valueOfPromise1, valueOfPromise2, ...]
});

也可以使用 async/await 语法:

const values = await allPromise;
console.log(values); // [valueOfPromise1, valueOfPromise2, ...]

Promise.all() 返回的 promise 被解析或拒绝的方式。
如果 allPromise 都被成功解析,那么 allPromise 将使用一个包含各个 promise 已执行完成后的值的数组作为结果。数组中 promise 的顺序是很重要的——将按照这个顺序得到已实现的值。
在这里插入图片描述
但是如果至少有一个 promise 被 rejected ,那么 allPromise 会以同样的原因立即 rejected (不等待其他 promise 的执行)。
在这里插入图片描述

如果所有的 promise 被 rejected ,等待所有的promise 执行完成,但只会返回最先被rejected 的promise 的 reject 原因。
在这里插入图片描述
具体使用可以参考: https://juejin.cn/post/7003713678419705870

Promise.all() 的这种行为被称为快速失败,如果 promise 数组中至少有一个 promise 被 rejected ,那么返回的 promise 也被拒绝。如果promise 数组中所有的都被 rejected ,那么返回的promise 被拒绝的原因是先rejected的那一个。

Promise.all() 是并行执行异步操作并获取所有 resolve 值的最佳方法,非常适合需要同时获取异步操作结果来进行下一步运算的场合

async/await

Promise是用来解决回调地域问题,因此es7出现了async/await,是Promise的语法糖,等同于Promise的链式调用+ Exception处理。

async/await有一个限制就是必须在函数中使用,因此我们将代码包进一个函数,并在函数前加上async这样我们便可以在函数中使用await关键字

const test = async () => {let a = 0...}test()

await用在哪里呢?用在.then回调前的Promise

await后面跟着Promise,而它的返回值便是回调时resolve()传来的值,代替了回调函数,看起来代码一下子就清晰很多了。

const test = async () => {let a = 0const res = await new Promise((resolve, reject) => {setTimeout(() => {a = 1resolve(a)}, 1000)})console.log(res) //1}test()

总结

  • Promise 是一种更底层的异步编程模型,而 async/await 则是基于 Promise 的语法糖,使异步代码更加清晰易读。

  • 在实际使用中,async/await 更容易理解和维护,但它们本质上仍然依赖于 Promise。

参考文档:

  • https://juejin.cn/post/7078882164032421924
  • https://juejin.cn/post/7003713678419705870

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/183396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux下实现Qt程序实现开机自启动

1.原理 要想实现开机自启动,首先,QT是没有这种实现的,最好是靠电脑开机的启动目录启动软件,下面这个目录 /etc/xdg/autostart 这是操作系统中用于配置启动项的目录,该目录下存放着开机自启动的启动器(.desktop)文件…

Flink-时间流与水印

时间流与水印 一、背景二、时间语义1.事件时间(event time)2.读取时间(ingestion time)3.处理时间(processing time) 三、水印-Watermarks1.延迟和正确性2.延迟事件3.顺序流4.无序流5.并行流 四、Windows1.…

28 主题管理

1.如何删除主题 执行kafka-topics脚本,删除操作是异步的,执行完脚本只是把主题标记为已删除 2.删除主题失败 可能原因: 副本所在broker宕机了待删除主题的部分分区还在迁移 解决方法: 手动删除zk节点/admin/delete_topics下以…

初识Java 18-5 泛型

目录 动态类型安全 异常 混型 C中的混型 替代方案 与接口混合 使用装饰器模式 与动态代理混合 本笔记参考自: 《On Java 中文版》 动态类型安全 在Java 5引入泛型前,老版本的Java程序中就已经存在了List等原生集合类型。这意味着,我们…

【计算机网络笔记】交换机

系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能(1)——速率、带宽、延迟 计算机网络性能(2)…

【MySQL工具】my2sql-快速解析binlog

​​​​​​ 目录 ​​​​​​安装 my2sql简介 用途 工具优势 限制 账号所需权限 参数解析 场景 场景1 回滚 安装 安装比较简单 直接下载二进制命令即可使用 wget https://github.com/liuhr/my2sql/raw/master/releases/centOS_release_7.x/my2sql my2sql简介 …

AUTOSAR系统服务篇 - BswM

文章目录 模式仲裁仲裁规则模式条件和逻辑表达式模式仲裁的要求立即操作和延时操作初始化后的仲裁行为模式控制模式处理周期模式控制的要求触发和条件动作列表可用动作初始化后的模式控制行为等待功能多分区支持BswM接口和端口模式请求端口模式切换端口模式切换通知组件类型和内…

上海亚商投顾:沪指震荡下跌 成交量继续下破8000亿

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整,深成指、创业板指午后跌超1%,北证50指数跌超7%,超百只北…

Windows11编译Hadoop3.3.6源码

由于https://github.com/kontext-tech/winutils还未发布3.3.6版本,因此尝试源码编译 目录 环境和安装包准备,见2zlib编译方法一:方法二: 配置文件更改1. maven阿里云镜像2. Node版本3. 越过Javadoc检查 编译HadoopError,其他报错…

JavaScript中的异步处理方法

JavaScript中的异步处理是开发者在日常开发过程中必须面对的一个重要问题。由于JavaScript是单线程的,因此对于一些可能需要长时间执行的操作,如网络请求、IO操作等,如果采用同步的方式,可能会导致应用程序的阻塞,降低…

科研学习|论文解读——Deep learning for anomaly detection in log data: a survey

摘要 自动日志文件分析能够及早发现系统故障等相关事件。特别是,自学习异常检测技术能够捕捉日志数据中的模式,然后向系统操作员报告意外的日志发生,而无需提前提供或手动建模异常场景。最近,越来越多的利用深度学习方法来实现此目…

【Java】JDBC 之 PreparedStatement 和 Statement 的区别和理解【转载并梳理】

一、PreparedStatement 和 Statement 的含义和区别 1、含义 PreparedStatement:PreparedStatement 是预编译的,对于批量处理可以大大提高效率,也叫 JDBC存储过程。Statement:使用 Statement 对象,在对数据库只执行一…

ExoPlayer - Failed to initialize OMX.qcom.video.decoder.avc

人莫鉴于流水而鉴于止水,唯止能止众止 1. 背景 使用ExoPlayer,我不信你没遇到过这个问题: java.lang.IllegalArgumentException: Failed to initialize OMX.qcom.video.decoder.avc 详细内容如下图所示: 2. MediaCodec(解码器) …

ArkUI框架中的PersistentStorage和Environment深入详解【鸿蒙专栏-13】

文章目录 ArkUI框架中的PersistentStorage和EnvironmentPersistentStorage:保持状态的长存储概述限制条件使用场景初始化和访问属性示例流程图注意事项Environment:设备环境查询使用场景从UI中访问Environment参数应用逻辑使用Environment深入ArkUI框架的持久化存储与设备环境…

FastApi接收不到Apifox发送的from-data字符串_解决方法

接收不到Apifox发送的from-data字符串_解决方法 问题描述解决方法弯路总结弯路描述纵观全局小结 问题描述 这里写了一个接口,功能是上传文件,接口参数是file文件和一个id字符串 gpt_router.post("/uploadfiles") async def create_upload_fi…

使用Feign简化Spring Boot微服务间的调用

摘要: 在微服务架构中,服务间的通信是至关重要的。Spring Cloud提供了多种工具,其中Feign是一款声明式的Web服务客户端,能够显著简化服务调用的过程。本文将详细介绍在Spring Boot应用中如何使用Feign进行微服务之间的调用。 正文…

配置自动化部署Jenkins和Gitea

配置自动化部署 这里使用的是JenkinsGitea 如果不知道怎么安装Jenkins和Gitea可以参考下面文章 https://blog.csdn.net/weixin_46533577/article/details/134644144 我的另一篇文章 介绍 前端 先说下自己的情况,因为自己服务器原因,使用的服务器内…

防篡改,Tripwire的快速安装与简洁使用

防篡改Tripwire 一、安装 1.准备(centos7的yum不带tripwire) wget https://mirrors.ustc.edu.cn/epel/7/x86_64/Packages/e/epel-release-7-14.noarch.rpm rpm -ivh epel-release-7-14.noarch.rpm yum -y install tripwire另一个方法 cd /etc/yum.rep…

面向对象的四大特性:封装、抽象、继承、多态

封装(Encapsulation) 封装也叫作信息隐藏或者数据访问保护。类通过暴露有限的访问接口,授权外部仅能通过类提供的方式来访问内部信息或者数据。它需要编程语言提供权限访问控制语法来支持,例如 Java 中的 private、protected、pu…