将AngularJS的Promise.all功能移植到VueJS的实现问题咨询

原有实现逻辑梳理 #

原 AngularJS 代码的核心逻辑如下：

• 遍历 items 对象的所有属性值，收集每个 details 下自带的 promise 异步对象
• 等待所有收集到的异步对象执行完毕（无论成功失败，因为使用了 finally 钩子）后，对外返回的异步对象才触发成功回调，且没有返回值
• 外层包裹的 deferred 属于冗余的 promise 包装写法，原生 Promise 无需这么处理

现有 Vue 实现的问题 #

你当前写的代码存在两个核心问题：

• 没有取 details 上自带的 promise 属性，反而把 details 普通对象包装成了立刻成功的 Promise，完全没有用到原有异步逻辑
• 直接返回 Promise.all 时，只要任意一个异步对象失败，整体就会立刻抛出失败回调，和原逻辑无论成败都等待全部完成再返回成功的行为不一致

修正后的代码 #

完全对齐原逻辑（无论异步成败都等待全部完成后返回成功） #

// 直接提取所有details下的promise属性
const promises = Object.values(items).map(details => details.promise)
// allSettled会等待所有promise执行完成（无论成功失败）
return Promise.allSettled(promises).then(() => {
  // 无返回值，和原逻辑完全对齐
})

如果你实际需要「所有异步都成功才返回成功，任意失败就抛出错误」的逻辑 #

可以简化为：

const promises = Object.values(items).map(details => details.promise)
return Promise.all(promises)

内容的提问来源于stack exchange，提问作者Sarah