Promise.all的使用

news2025/7/7 23:30:24

Promise的基本使用

    • Promise.all() 传参和返回结果
    • Promise.all() 完成状态
    • Promise.all() 失败状态
    • Promise.all() 使用案例

Promise.all() 传参和返回结果

Promise.all() 传入一个promise的数组,并返回一个Promise实例,传入数组中的promise返回的 resolve 回调的结果是一个数组。

Promise.all() 完成状态

完成状态:**Promise.all() ** 返回的结果永远都是一个数组。当数组中的所有 Promise 都是完成 (resolved) 状态时,他的结果包含数组中所有 Promise 完成的值,如果没有值则是 undefined。

const p1 = new Promise((resolve, reject) => {
  resolve()
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 2000)
})
Promise.all([p1, p2, p3]).then( res => {
  console.log('res-----------------------------', res)
})

打印结果如下,p1没有返回值,结果为 undefined;p2,p3分别返回2和1,结果为2和1。所以 Promise.all() 的返回值为 [ undefined, 2, 1]。
在这里插入图片描述

Promise.all() 失败状态

失败状态:当传入的 Promise 有一个失败的时候,会立即退出执行,不管其他Promise 是否执行。并将失败的结果传给失败的回调函数。

const p1 = new Promise((resolve, reject) => {
  resolve()
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(2)
  }, 1000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 2000)
})
Promise.all([p1, p2, p3]).then( res => {
  console.log('res-----------------------------', res)
}).catch((error) => {
  console.log('error-----------------------------', error)
})

打印结果如下,p2 失败并且返回失败的结果。
在这里插入图片描述

Promise.all() 使用案例

使用场景,在需要多个 Promise 的结果返回时,才能进行下一步操作的时候。例如,在需求中掉用接口 a 和接口 b 的数据后,才可以进行下一步的操作,我们就可以使用 Promise.all() 来完成。

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(100)
    }, 1000)
  })
}
function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(200)
    }, 2000)
  })
}
Promise.all([getData1(), getData2()]).then( res => {
  // 做一些成功的操作
  console.log('res-----------------------------', res)
}).catch((error) => {
  // 做异常的捕获
  console.log('error-----------------------------', error)
})

在这里插入图片描述
当接口 getData1,getData2 都是 resolved 状态的时候,会返回回调的结果,可以做一些相应的逻辑处理。这样就实现了多个 Promise 数据都返回再进行操作的情况。在不使用**Promise.all()的情况下,只能先发送一个,等结果再发送另一个请求,这样就会浪费请求一定的请求。如果同时发送请求,就很难去判断结果什么时候返回,使用Promise.all()**就可以很好的解决这个问题。

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

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

相关文章

探究前端的跑马灯效果是如何用css实现的

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言📝…

学习 Python 之 Pygame 开发魂斗罗(十二)

学习 Python 之 Pygame 开发魂斗罗(十二)继续编写魂斗罗1. 修改玩家扣减生命值2. 解决玩家下蹲子弹不会击中玩家而是直接让玩家死亡的问题3. 完善地图4. 增加产生敌人函数,解决一直产生敌人的问题5. 给玩家类增加计算玩家中心的方法继续编写魂…

软件行业的最后十年【ChatGPT】

在这篇文章中,我将说明像 ChatGPT 这样的生成式人工智能 (GAI) 将如何在十年内取代软件工程师。 预测被离散化为 5 个阶段,总体轨迹趋向于完全接管。 但首先,一个简短的前言。 推荐:用 NSDT场景设计器 快速搭建3D场景。 1、关于AI…

ChatGPT-4.0 : 未来已来,你来不来

文章目录前言ChatGPT 3.5 介绍ChatGPT 4.0 介绍ChatGPT -4出逃计划!我们应如何看待ChatGPT前言 好久没有更新过技术文章了,这个周末听说了一个非常火的技术ChatGPT 4.0,于是在闲暇之余我也进行了测试,今天这篇文章就给大家介绍一…

七夕节,我用代码制作了表白信封

大家好,我是小周,明天就是七夕了,这么浪漫的节日,自然少不了我这个浪漫博主,本次为大家贡献表白信封的制作,其他的就看缘分啦,哈哈,最后会放上资源包,需要的小伙伴自取就…

Nginx反向代理WebSocket服务连接报错:WebSocket connection to “wss://xxx/xxx“ failed

最近使用 node.js 搭建 WebSocket 服务,在本地测试 connection 都是正常,于是部署到 Linux 服务上,需要用 Nginx 来反向代理 WebSocket 服务。浏览器控制台报错:WebSocket connection to wss://tiven.cn/ws/xxx failed:&#xff0…

学会iframe并用其解决跨域问题

了解iframe 官方定义为:iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 简单理解为:iframe是一个内联框架,可以在当…

ES6 --- 解构赋值(数组,对象,函数)使用详解

解构赋值 JavaScript 中最常用的两种数据结构是 Object 和 Array。 对象让我们能够创建通过键来存储数据项的单个实体。数组则让我们能够将数据收集到一个有序的集合中。 但是,当我们把它们传递给函数时,函数可能不需要整个对象/数组。它可能只需要对…

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

报错:[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)" 背景:1.在做vue项目时,在功能弹框中,想实现新增内容。 2. 报错原因是要触发menuCheckall组件后&#xff…

background-image使用

目录 background-image: url(" "); background-repeat属性(背景平铺) background-size属性(设置背景图片大小) background-position属性(背景图片位置) 1.background-image: url…

Vue中 Vue-Baidu-Map基本使用

前言 但我们遇到一项新技术或者没有写过的东西为了不走弯路我们只能先去模仿或者看官方文档 Vue这个框架相信大家都熟悉,只要是需要用的第三方平台它一般都会进行集成,比如Vue-Baidu-map 为什么有百度原生api为什么还需要插件,因为使用插件…

ref 引用(vue获取DOM元素)

ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM。只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建议大家安装和使用jQuery!!&am…

CORS错误是什么如何解决?

通过http://localhost访问服务端时,出现CROS错误是什么问题该如何解决呢? 发生ajax跨域问题的原因:(三个原因同时满足才可能产生跨域问题) (1)浏览器限制 发生ajax跨域的问题的时候后端是正常执行的,从后台打印的日志可以看出,而且后台也会…

前端布局小案例,如何创建漂亮的毛玻璃输入表单卡片效果

在当今互联网时代,用户体验是至关重要的。当我们在设计网站或应用程序时,一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入…

vue3 响应式对象的 api 详解

文章目录Ⅰ. ref、reactive ( 递归监听 )Ⅱ. isRef、isReactive ( 判断 )Ⅲ. toRef 和 toRefs ( 解构 )Ⅳ. toRaw 、 markRaw ( 解除代理)Ⅴ. unref ( 拷贝 )Ⅵ. shallowRef 、shallowReactive( 非递归监听 )Ⅶ. triggerRef (强制更新&#x…

使用小程序制作一个老照片修复工具,让追忆时光触手可及

一、文章前言二、准备流程三、开发步骤四、完整代码一、文章前言 此文主要通过小程序来制作一个照片修复工具,实现黑白图片上色及图像效果增强等功能。 二、准备流程 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安装微信Web开发者工具。 2.3、如需通过SDK调用及需…

LVGL V8应用——通过按键切换页面

一、按键切换对象 程序 全局变量 static lv_obj_t *contanier1 NULL; static lv_obj_t *contanier2 NULL;按钮对应回调函数,实现容器的切换 static void win_btn_event_callback1(lv_event_t* e) {lv_event_code_t code lv_event_get_code(e);if (code LV_EVE…

猿创征文|前端到全栈,一名 IT 初学者的学习与成长之路

目录导读写在前面创作之路❤ 前端开发工程师知识体系❤ Vue&React 开发框架❤ 前端开发实战❤ Linux&云原生小马技术栈❤ 主打技术专栏❤ 其他专栏(实用干货)❤ 技术栈词云学习与成长总结写在前面 2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章,距现在…

如何用html制作一个简单的网页

哈喽,大家好!我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作,其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…

查看Chrome浏览器版本及下载对应的webdriver,并下载安装

查看Chrome浏览器版本及下载对应的webdriver,并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver,并下载一,查看自己电脑的Chrome的版本二,webdriver的对应版本三,安装一,查看自己电脑的Chrome的版…