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

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

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

问题就来了。

加载异常捏……

最后我一通查:

重点来了

是因为这个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.hqwc.cn/news/641317.html

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

相关文章

O2O电商接口解决方案||主流电商|跨境电商API接口应用场景及接入

01 涉及主流电商平台API数据采集接口 电商接口:淘宝,天猫,京东,拼多多,1688,抖音,微店,快手 跨境电商:LAZADA,速卖通,亚马逊,阿里巴巴…

二叉树中的最长交错路径

题目链接 二叉树中的最长交错路径 题目描述 注意点 每个节点的值在 [1, 100] 之间 解答思路 深度优先遍历整棵树,遍历的同时需要将到达根节点是向左交叉还是向右交叉以及路径长度传递到子树。当根节点是向左交叉遍历而来,子树想和根节点组成路径就只…

带RS485通讯,开关量输入输出,谐波分析等家户工商业储能智能计量电表ADL3000-E-B/KC可出口欧美UL认证

安科瑞薛瑶瑶18701709087 ◉概述 ADL3000-E-B 导轨式多功能电能表,是主要针对电力系统,工矿企业,公用设施的电能统计、管理需求而设计的一款智能仪表,产品具有精度高、体积小、安装方便等优点。集成常见电力参数测量及电能计量及…

剑指offer--调整数字顺序使奇数位于偶数前面

题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有的偶数位于数组的后半部分. 算法分析 算法:利用快速排序的一次划分思想,后面的奇数往前移,前面的偶数往后移 时间复杂度 :O(n) 空间…

分布式监控平台---Zabbix

一、Zabbix概述 作为一个运维,需要会使用监控系统查看服务器状态以及网站流量指标,利用监控系统的数据去了解上线发布的结果,和网站的健康状态。 利用一个优秀的监控软件,我们可以: 通过一个友好的界面进行浏览整个…

Appian发布最新版本:通过AI流程自动化推动业务发展

Appian公司于2024年4月16日在弗吉尼亚州麦克莱恩宣布推出Appian平台的最新版本。此版本引入了Process HQ,这是一个集流程挖掘和企业AI于一体的系统,结合了Appian的数据平台。Process HQ为企业运营提供前所未有的可见性,支持数据驱动的决策和流…

使用ERNIE SDK和Comate开发AI“划拳”游戏!

作者晓飞好,飞桨星河社区开发者,金融行业软件开发工程师,对大模型应用开发比较感兴趣。个人主页链接:https://aistudio.baidu.com/personalcenter/thirdview/48323 技术的迅速发展为我们带来了无限的创新可能,大模型技…

Keil中编译无error(有warning),但程序无法运行的一种情况

问题 void Run_Led(void) {HAL_GPIO_TogglePin(RUN_LED_GPIO_Port, RUN_LED_Pin);Delay_ms(500); }void StartDefaultTask(void *argument) {/* USER CODE BEGIN StartDefaultTask */char c;/* Infinite loop */for(;;){while(1) { Run_Led;}...}非常简单的一个程序&#xf…

vue2 顶象 安全 验证码的使用

顶象-业务安全引领者&#xff0c;让数字世界无风险 类似与这样的登录之前的验证 滑动一个盒子了 或者是 顺序点击文字了 等 <template><a-modal:closable"false":visible"show"cancel"handleCancel":maskClosable"true":wid…

如何用 AI 工具做数据分析与可视化?

&#xff08;注&#xff1a;本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费&#xff09; 万字长文&#xff0c;助力你用 AI 提升科研效率。 2024 年 4 月 14 日&#xff0c;应武汉大学信息管理学院的邀请&#xff0c;我和北京大学步一老师给几…

分享babylon.js实现Web三维场景

效果截图 实现代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><script src"https://cdn.babylon…

虚拟化及Docker基础

一、虚拟化 1.1 云端 1.2 云计算服务模式分层 1.3 虚拟化架构 1.3.1 寄居架构 1.3.2 原生架构 1.4 虚拟化产品 1.4.1 仿真虚拟化产品&#xff08;对系统硬件没有要求&#xff0c;性能最低&#xff09; 1.4.2 半虚拟化 &#xff08;虚拟机可以使用真机物理机&#xff09…