Promise.all() 方法的参数可以是什么类型?

简介: 综上所述,`Promise.all()` 方法的参数类型较为灵活,但无论使用哪种类型的可迭代对象作为参数,其核心的异步操作处理逻辑和成功失败的判断机制都是一致的,都是为了方便地处理多个异步操作的并发执行和结果汇总。

Promise.all() 方法的参数必须是一个可迭代对象,通常是一个包含Promise对象的数组,但实际上,只要是符合可迭代协议的对象都可以作为参数,具体如下:

数组

  • 示例:这是最常见的使用方式,将多个Promise对象组成一个数组作为 Promise.all() 的参数。
const promise1 = new Promise((resolve) => setTimeout(() => resolve('数据1'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('数据2'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('数据3'), 1500));

Promise.all([promise1, promise2, promise3])
.then((results) => {
   
    console.log('所有请求都成功,结果为:', results);
  })
.catch((error) => {
   
    console.log('有请求失败,错误为:', error);
  });
  • 特点:数组中的Promise对象会并行执行,Promise.all() 会等待所有Promise都变为 fulfilled 状态后,将它们的结果按照数组顺序组成一个新的数组作为最终结果。如果其中有一个Promise被 rejected,则 Promise.all() 会立即返回一个被 rejected 的Promise,并将第一个失败的Promise的错误信息传递给 .catch() 方法的回调函数。

类数组对象

  • 示例:除了普通数组,类数组对象也可以作为 Promise.all() 的参数。例如,arguments 对象或具有 length 属性和索引属性的对象。
function getData() {
   
  const promiseA = new Promise((resolve) => setTimeout(() => resolve('A数据'), 1200));
  const promiseB = new Promise((resolve) => setTimeout(() => resolve('B数据'), 1000));
  const promiseC = new Promise((resolve) => setTimeout(() => resolve('C数据'), 1500));

  return Promise.all(arguments);
}

getData(promiseA, promiseB, promiseC)
.then((results) => {
   
    console.log('所有请求都成功,结果为:', results);
  })
.catch((error) => {
   
    console.log('有请求失败,错误为:', error);
  });
  • 特点:与数组类似,类数组对象中的Promise对象也会并行执行,并且遵循相同的成功和失败处理规则。需要注意的是,类数组对象必须具有可迭代的属性和方法,以便 Promise.all() 能够正确地遍历和处理其中的Promise对象。

可迭代对象

  • 示例:ES6中的一些可迭代对象,如 SetMap 等,也可以作为 Promise.all() 的参数。
const promiseSet = new Set([
  new Promise((resolve) => setTimeout(() => resolve('集合数据1'), 1300)),
  new Promise((resolve) => setTimeout(() => resolve('集合数据2'), 1100)),
  new Promise((resolve) => setTimeout(() => resolve('集合数据3'), 1400))
]);

Promise.all(promiseSet)
.then((results) => {
   
    console.log('所有请求都成功,结果为:', results);
  })
.catch((error) => {
   
    console.log('有请求失败,错误为:', error);
  });
  • 特点Promise.all() 会遍历可迭代对象中的每个元素,如果元素是Promise对象,则会等待其状态变化;如果元素不是Promise对象,则会将其视为已经 fulfilled 的Promise,并将其本身作为结果。同样,只要其中有一个Promise被 rejected,整个 Promise.all() 操作就会失败。

包含Promise和非Promise值的混合对象

  • 示例:参数中可以同时包含Promise对象和其他非Promise的值,如字符串、数字等。
const promiseX = new Promise((resolve) => setTimeout(() => resolve('X数据'), 1200));
const valueY = 'Y数据';
const promiseZ = new Promise((resolve) => setTimeout(() => resolve('Z数据'), 1400));

Promise.all([promiseX, valueY, promiseZ])
.then((results) => {
   
    console.log('所有请求都成功,结果为:', results);
  })
.catch((error) => {
   
    console.log('有请求失败,错误为:', error);
  });
  • 特点:在这种情况下,非Promise值会被视为已经 fulfilled 的Promise,其值会直接作为结果数组中的对应元素。Promise.all() 仍然会等待所有的Promise对象都变为 fulfilled 状态后才返回最终结果。如果Promise对象中有一个失败,则整个操作失败,并将第一个失败的Promise的错误信息传递给 .catch() 方法。

综上所述,Promise.all() 方法的参数类型较为灵活,但无论使用哪种类型的可迭代对象作为参数,其核心的异步操作处理逻辑和成功失败的判断机制都是一致的,都是为了方便地处理多个异步操作的并发执行和结果汇总。

相关文章
|
6月前
|
前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
|
6月前
|
存储 运维 前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
|
前端开发
62 # 借用 promise 写成类的方法
62 # 借用 promise 写成类的方法
31 0
|
4天前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
1天前
|
前端开发
Promise.race() 方法在什么场景下使用?
`Promise.race()` 方法通过其独特的竞争机制,在需要快速获取结果、设置超时控制、实现快速失败以及根据条件动态选择异步操作等场景中,能够提供简洁有效的解决方案,帮助优化异步操作的执行流程和提高系统的响应性能。
|
4月前
|
前端开发 JavaScript
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
133 1
|
3月前
|
前端开发 JavaScript
JavaScript——promise 是解决异步问题的方法嘛
JavaScript——promise 是解决异步问题的方法嘛
45 0
|
4月前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
198 1
|
6月前
|
前端开发 小程序
微信小程序异步请求数据promise方法
微信小程序异步请求数据promise方法
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
64 1

热门文章

最新文章