Promise.all 的方法还没执行完就执行了.then

news2024/9/21 7:39:46

碰见一个问题,接盘了一个有问题的页面修改。

改变日期后 查询很多数据再去重新加载页面上的数据显示相关的组件。

问题就来了。

加载异常捏……

最后我一通查:

重点来了

是因为这个Promise.all(数组),里边这个数组的问题。现在是在数据中定义的方法的调用,但是在定义这些请求方法的时候,没有写return,结果这些数组的调用的方法就变成了值。

解决方案:只要在调用这个API的时候,前边加一个return,让Promise.all()中的数组都是方法,而不是值就可以了。

详细记一下

在JavaScript中,Promise.all方法用于将多个Promise实例组合成一个新的Promise实例。

当我们在Promise.all的方法还没执行完就直接调用.then方法,实际上是在调用Promise.all返回的新的Promise实例的.then方法。这种情况下,.then方法会在所有组合的Promise实例都成功解决之后被调用。

这种情况下,.then方法中的回调函数会接收到一个数组,这个数组中的每个元素都是对应的Promise实例解决的值。

下面是一个简单的例子:

 
javascriptlet promise1 = Promise.resolve(3);
let promise2 = Promise.resolve(4);
let promise3 = Promise.resolve(5);

Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values); // [3, 4, 5]
});

在这个例子中,Promise.all的方法可能还没执行完就调用了.then方法,当所有的Promise实例都成功解决后,.then方法中的回调函数会被调用,并输出每个Promise实例解决的值组成的数组。

注意,如果任何一个Promise实例失败了,Promise.all会立即reject,并返回第一个失败的Promise实例返回的失败原因。

 
javascriptlet promise1 = Promise.resolve(3);
let promise2 = Promise.reject(4);
let promise3 = Promise.resolve(5);

Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
}).catch(function(reason) {
console.log(reason); // 4
});

在这个例子中,promise2是一个失败的Promise实例,因此Promise.all会立即reject,并返回失败原因4,.then方法中的回调函数不会被调用。

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

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

相关文章

XYCTF 部分wp及学习记录

1.ezmd5 根据题目提示 我们知道应该是要上传两张md5值相同的图片 根据原文链接:cryptanalysis - Are there two known strings which have the same MD5 hash value? - Cryptography Stack Exchange 把保存下来的图片上传一下 得到flag 2.ezhttp 根据原文链接&…

STM32H7的LCD控制学习和应用

STM32H7的LCD控制 LTDC基础硬件框图LTDC时钟源选择LTDC的时序配置LTDC背景层、图层1、图层2和Alpha混合LTDC的水平消隐和垂直消隐LCD的DE同步模式和HV同步模式的区别区分FPS帧率和刷新率避免LTDC刷新撕裂感的解决方法 驱动示例分配栈的大小MPU和Cache配置初始化SDRAM初始化LCD应…

鸿蒙 harmonyos 线程 并发 总结 async promise Taskpool woker(三)多线程并发 Worker

Worker Worker是与主线程并行的独立线程。创建Worker的线程称之为宿主线程,Worker自身的线程称之为Worker线程。创建Worker传入的url文件在Worker线程中执行,可以处理耗时操作但不可以直接操作UI。 Worker主要作用是为应用程序提供一个多线程的运行环境…

办公设备租赁行业内卷瞎扯

办公设备租赁行业内卷瞎扯 最近听到很多同行抱怨,现在市场太卷了,真的有点到了卷不死就往死里卷的节奏,让大家都开始想换地方,或者转行。但是今天,我想从另外一个角度聊一下这个问题,分析一下,…

苍穹外卖day9 (1)用户端历史订单

文章目录 前言用户端历史订单1. 查询历史订单1.1 业务规则1.2 接口设计1.3 代码实现 2. 查询历史订单详情2.1 接口设计2.2 代码实现 3. 取消订单3.1 业务规则3.2 接口设计3.3 代码设计 4. 再来一单4.1 业务规则4.2 接口设计4.3 代码实现 前言 用户端对历史订单的操作&#xff…

机器人系统开发ros2-基础学习16-使用 rosdep 管理依赖关系

1. what is rosdep? rosdep是一个依赖管理实用程序,可以与包和外部库一起使用。它是一个命令行实用程序,用于识别和安装依赖项以构建或安装包。 其本身rosdep并不是一个包管理器;它是一个元包管理器,它使用自己的系统知识和依赖…

Day10案例分页查询,条件查询

对要求进行逻辑分析,传递固定参数{page,pagesize}任意参数{name,gender,begin,end},返回总记录数以及当前页码的记录 不使用pagehelper插件,首先完成SQL语句 SQL语句 //固定头 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLI…

SQL-DML数据操纵语言(Oracle)

文章目录 DML数据操纵语言常见的字段属性字符型字段属性char(n)varchar2(n)/varchar(n) 数值型字段属性number([p],[s]int 日期型字段属性DATEtimestamp 如何查看字段属性增加数据INSERT快捷插入 删除数据DELETE修改数据UPDATE DML数据操纵语言 定义 是针对数据做处理&#xf…

JavaScript中的map()方法详解

1. map() 的返回值是一个新的数组&#xff0c;新数组中的元素为 “原数组调用函数处理过后的值” 2. 简单使用&#xff1a;遍历整个数组&#xff0c;将大于4的元素乘以2 const array [2, 3, 4, 4, 5, 6]console.log("array",array) const map array.map(x > {…

【THM】Linux Privilege Escalation(权限提升)-初级渗透测试

介绍 权限升级是一个旅程。没有灵丹妙药,很大程度上取决于目标系统的具体配置。内核版本、安装的应用程序、支持的编程语言、其他用户的密码是影响您通往 root shell 之路的几个关键要素。 该房间旨在涵盖主要的权限升级向量,并让您更好地了解该过程。无论您是参加 CTF、参加…

什么?双核A7双网口核心板只要49?

“性价比之王” 触觉智能IDO-SOM2D0X系列基于SigmaStar SSD201/202 SoC的超小SOM模组&#xff0c;双核A7 1.2GHz主频&#xff0c;1080P视频解码&#xff0c;支持MIPI/RGB显示接口&#xff0c;支持双以太网&#xff0c;支持SDIO/USB/SPI/I2C/UART/DMIC/I2S&#xff0c;集成音频C…

跨平台手机号:微信手机号授权登录、微信授权登录双登录实现账户生态融合,新时代的身份密钥

小程序厂商的多样性体现在开发工具、服务领域、商业模式等多方面&#xff0c;各厂商凭借独特的技术优势、行业解决方案和市场策略&#xff0c;满足不同企业和用户需求。与此同时&#xff0c;随着移动互联网发展&#xff0c;手机号统一登录成为提升用户体验、简化登录流程的关键…

CTFshow-PWN-栈溢出(pwn36)

存在后门函数&#xff0c;如何利用&#xff1f; 好好好&#xff0c;终于到了这种有后门函数的了 checksec 检查一下&#xff1a; 32 位程序&#xff0c;RELRO 保护部分开启 RWX: Has RWX segments 存在可读可写可执行的段 使用 ida32 看 main 函数 跟进 ctfshow 函数…

T2I-Adapter:学习适配器为文本到图像扩散模型挖掘更多可控能力

文章目录 一、研究动机二、T2I-Adapter的特点三、模型方法&#xff08;一&#xff09;关于stable diffusion&#xff08;二&#xff09;适配器设计1、结构控制2、空间调色板3、多适配器控制 &#xff08;三&#xff09;模型优化训练期间的非均匀时间步采样 一、研究动机 T2I模…

安卓手机如何改ip地址?探索方法与注意事项

在数字时代&#xff0c;IP地址成为了我们在线身份的重要标识。对于安卓手机用户而言&#xff0c;了解如何修改IP地址可能涉及多种场景&#xff0c;那么&#xff0c;如何安全、有效地进行这一操作呢&#xff1f;下面将为您提供相关方法&#xff0c;并探讨修改IP地址时的注意事项…

国外问卷调查如何做?需要借助海外住宅IP吗?

在数字化时代&#xff0c;国外问卷调查不仅是了解市场需求的重要手段&#xff0c;还成为了一项能够赚取额外收入的方式。随着全球范围内消费者行为的多样化&#xff0c;各类企业和机构越来越需要了解不同地区的用户观点和偏好&#xff0c;以优化产品和服务。 一、国外问卷调查…

接口测试和Mock学习路线(中)

1.什么是 swagger Swagger 是一个用于生成、描述和调用 RESTful 接口的 WEB 服务。 通俗的来讲&#xff0c;Swagger 就是将项目中所有想要暴露的接口展现在页面上&#xff0c;并且可以进行接口调用和测试的服务。 现在大部分的项目都使用了 swagger&#xff0c;因为这样后端…

基于STM32实现流水灯【Proteus仿真】

详情更多 wechat&#xff1a;嵌入式工程师成长日记 https://mp.weixin.qq.com/s?__bizMzg4Mzc3NDUxOQ&mid2247485624&idx1&sn4e553234c2624777409bd2067a07aad8&chksmcf430de0f83484f6189b119d9d83ea6e6f2a85d13afaa04d218483918231c38e6382d3007061&tok…

【大语言模型LLM】- Meta开源推出的新一代大语言模型 Llama 3

&#x1f525;博客主页&#xff1a;西瓜WiFi &#x1f3a5;系列专栏&#xff1a;《大语言模型》 很多非常有趣的模型&#xff0c;值得收藏&#xff0c;满足大家的收集癖&#xff01; 如果觉得有用&#xff0c;请三连&#x1f44d;⭐❤️&#xff0c;谢谢&#xff01; 长期不…

【图说】VMware Ubuntu22.04 详细安装教程

前言 无论是从事 Linux 开发工作&#xff0c;还是希望电脑运行双系统&#xff0c;VMware 虚拟机都是我们日常工作不可或缺的工具。本章将会重点介绍 VMware 安装流程&#xff0c;以及在 VMware 上如何运行、使用 Ubuntu22.04 系统。 一、VMware 下载安装 1.1 VMware 官网下载…