Promise.all()的细节使你的面试半成品？新手法了解一下！

Promise.all()简介

Promise.all()函数是JavaScript中一个非常有用的函数，它可以让你等待多个异步操作完成，并在所有操作完成后执行回调函数。这个函数的语法如下：

Promise.all(promises).then(function(values) {
  // 所有异步操作都已完成，values是一个包含所有异步操作结果的数组
});

例如，以下代码使用Promise.all()来等待三个异步操作完成：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一个操作完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第二个操作完成');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第三个操作完成');
  }, 3000);
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values); // ['第一个操作完成', '第二个操作完成', '第三个操作完成']
});

使用forEach手写Promise.all()

一些开发者可能会使用forEach手写Promise.all()，以为这样可以更灵活地控制异步操作。但是，这种方法存在一些问题：

• 代码更复杂，更难维护。
• 容易出错，特别是当需要处理多个异步操作时。
• 难以扩展，当需要添加或删除异步操作时，需要修改代码。

使用新的方法来使用Promise.all()

为了避免这些问题，我们可以使用一种新的方法来使用Promise.all()。这种方法使用Array.prototype.map()函数来将每个异步操作转换为一个Promise，然后使用Promise.all()来等待所有Promise完成。这个方法的语法如下：

Promise.all(promises.map(promise => promise.then(value => value))).then(function(values) {
  // 所有异步操作都已完成，values是一个包含所有异步操作结果的数组
});

例如，以下代码使用这种方法来等待三个异步操作完成：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第一个操作完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第二个操作完成');
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('第三个操作完成');
  }, 3000);
});

Promise.all(promises.map(promise => promise.then(value => value))).then(function(values) {
  console.log(values); // ['第一个操作完成', '第二个操作完成', '第三个操作完成']
});

这种方法比使用forEach手写Promise.all()更加简单、灵活和易于扩展。

结论

Promise.all()是一个强大的JavaScript函数，它可以让你等待多个异步操作完成，并在所有操作完成后执行回调函数。如果你正在使用forEach手写Promise.all()，那么你应该改用新的方法来使用Promise.all()。这种方法更加简单、灵活和易于扩展，可以帮助你编写更健壮的异步代码。