promise.all的用法讲解。

原创最新推荐文章于 2026-10-23 14:26:51 发布 7.8w 阅读 AI写同款

收录于

vue

es6

Yetian_2000

码龄8年墨衍会员 · AI 创作全网分发

43粉丝173篇原创

关注

什么是Promise.all()，它的用法是什么？是 JavaScript 中用于处理多个 Promise 的方法。它接受一个可迭代对象（如数组）作为参数，并返回一个新的 Promise，该 Promise 在所有输入的 Promise 完成后解决，或者在任何一个输入的 Promise 被拒绝时拒绝。阅读详情

AI摘要

本文详细介绍了Promise.all()方法的工作原理，当多个Promise实例组合时，只有所有实例都变为fulfilled状态，Promise.all()才会触发then()方法，接收到一个包含所有实例结果的数组。反之，只要有一个被rejected，就会触发catch()方法，返回第一个被reject的实例的值。通过示例代码，展示了Promise.all()在处理并发操作时的行为。

promise.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。

var p = Promise.all([p1,p2,p3]);

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

请看下面示例：需要注意的是，promise.all()成功时，在then（result）中result是个数组

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promise.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

标签

#javascript #前端 #vue.js