JavaScript | Promise.all() 方法

Promise.all() 方法实际上是 Promise 对象（也是 JavaScript 下用于处理所有异步操作的对象）的一个方法，它以一组 promises（一个可迭代的）作为输入。它返回一个单一的Promise ，当所有的 Promise 作为一个 iterable 传递时，它已经解决或者当 iterable 不包含任何 Promise 时。简单来说，如果任何传入的 Promise 被拒绝， Promise.all()方法会异步拒绝已经被拒绝的 Promise 的值，而不管其他 Promise 是否已经解决。
句法：

Promise.all( iterable )

参数：此方法接受一个可迭代的参数，它接受一个promise数组或包含一些对象的普通数组。
返回值：它遵循一些规则来返回单个 Promise：

• 如果传递的参数为空，则返回一个已解析的 Promise。
• 如果传递的 iterable 不包含任何 Promise，它会返回一个异步解析的 Promise。
• 对于所有其他情况，它返回一个待处理的 Promise。

Promise.all() 方法的实现和拒绝：
Fulfillment：返回的promise已经实现，

• 如果传递的 iterable 为空，则此方法同步返回一个已解析的 Promise。
• 如果所有传递的 Promise 都已实现，则返回的 Promise 将异步实现。
• 在这里，这个特定方法的成功执行完全取决于所有成功执行的承诺。

Rejection：如果任何传递的 Promise 被拒绝，则此方法拒绝该 Promise 的值，无论其他 Promise 是否已解决。换句话说，如果任何一个 Promise 执行失败，那么 Promise.all() 方法将返回一个错误，并且不会考虑其他 Promise 是否成功执行。
下面的示例说明了 JavaScript Promise.all() 方法：
示例 1： Promise.all() 方法等待执行

javascript

    p1 = Promise.resolve(50);
    p2 = 200
    p3 = new Promise(function(resolve, reject) {
        setTimeout(resolve, 100, 'geek');
    });
 
    Promise.all([p1, p2, p3]).then(function(values) {
        document.write(values);
    });

输出：

50, 200, geek

示例 2：这里的 Promise.all() 方法在 2000 毫秒后解析，输出显示为数组。

javascript

// Simple promise that resolves
// after a given time
const tOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}
 
// Resolving a normal promise
tOut(1000).then(result => document.write(result+"<br>"))
// Completed in 1000
 
// Promise.all
Promise.all([tOut(1000), tOut(2000)]).then(result => document.write(result))

输出：

Completed in 1000
Completed in 1000, Completed in 2000

这里， Promise.all()方法是维护的 Promise 的顺序。数组中的第一个 Promise 将被解析为输出数组的第一个元素，第二个 Promise 将是输出数组中的第二个元素，依此类推。
示例 3：这里的Promise.all()方法等待所有的 Promise 解决。

javascript

// Simple promise that resolves after a given time
const tOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Completed in ${t}`)
    }, t)
  })
}
 
// Array contains some time duration
const durations = [1000, 2000, 3000]
 
const promises = []  // Empty array
 
durations.map((duration) => {
   
    // Calling the async function timeout(), so
    // at this point the async function has started
    // and enters the 'pending' state
    // pushing the pending promise to an array.
  promises.push(tOut(duration))
})
 
document.write(promises)
 
// Passing an array of pending promises to Promise.all
// Promise.all will wait till all the promises get resolves
// and then the same gets resolved.
Promise.all(promises).then(response => document.write(response))
 
// It prints after previous promises gets resolved
// ["Completed in 1000", "Completed in 2000", "Completed in 3000"]

输出 ：

[object Promise], [object Promise], [object Promise]
.
.
. (gap between previous and last promises)
.
.
Completed in 1000, Completed in 2000, Completed in 3000

示例 4：如本例所示，如果其中一个 promise 失败，则其余所有 promise 都失败，结果将以 Error 的形式显示在控制台中。然后Promise.all()方法被拒绝。

javascript

// Promise that resolves after a given time
const tOut = (t) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (t === 2000) {
        reject(`Rejected in ${t}`)
      } else {
        resolve(`Completed in ${t}`)
      }
    }, t)
  })
}
 
const durations = [1000, 2000, 3000]
 
// Array contains some time durations
const promises = [] //empty array
 
durations.map((duration) => {
    promises.push(tOut(duration))
    // Pushing durations in the promises array
})
 
// Passing an array of pending promises to Promise.all
Promise.all(promises).then(response => document.write(response))
// Promise.all cannot be resolved, as one of the
// promises passed, got rejected.
 
.catch(error => document.write(`::Error::<br> ${error}`))
// Promise.all throws an error.

输出 ：

Error
Rejected in 2000

示例 5：在这个示例中，我们将使用一些计时器函数（特别是 setTimeout函数），其中包含不同的计时器，这些计时器将写入不同的 Promise 中，并且这些 Promise 将在 Promise.all() 方法中传递，以获得结果。

Javascript

let first_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 1 second");
  }, 1000);
});
 
let second_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 2 seconds");
  }, 2000);
});
 
let third_promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Resolved First after 3 seconds");
  }, 3000);
});
 
try {
  let result = Promise.all([first_promise, second_promise, third_promise]);
  result.then((data) => console.log(data));
} catch (error) {
  console.log(error);
}
 
// This code is contributed by Aman Singla...

输出：

[
  'Resolved First after 1 second',
  'Resolved First after 2 seconds',
  'Resolved First after 3 seconds'
]

支持的浏览器： JavaScript Promise.all()方法支持的浏览器如下：

• 谷歌浏览器 6.0 及以上
• Internet Explorer 9.0 及更高版本
• Mozilla 4.0 及更高版本
• Opera 11.1 及更高版本
• Safari 5.0 及以上