JS Promise.all详解|极客笔记

JS Promise.all详解

在JavaScript中，Promise.all是一个非常有用的方法，它可以接收一个由Promise对象组成的数组作为参数，并返回一个新的Promise对象。这个新的Promise对象会在数组中所有的Promise对象都变为resolved状态后才会变为resolved状态，如果数组中有任何一个Promise对象变为rejected状态，则新的Promise对象也会变为rejected状态。在本篇文章中，我们将详细介绍Promise.all方法的用法以及示例代码。

Promise.all的基本用法

使用Promise.all方法非常简单，只需要将一个包含多个Promise对象的数组作为参数传递给Promise.all，然后调用这个方法即可。下面是一个简单的示例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 is resolved');
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 is resolved');
  }, 1000);
});

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

在上面的示例中，我们创建了两个Promise对象promise1和promise2，分别在1秒和2秒后resolved。然后我们将这两个Promise对象放入一个数组中，传递给Promise.all方法。最终，在所有Promise对象都resolved时，then方法会被调用，打印出包含了所有resolved结果的数组。

Promise.all的错误处理

除了then方法外，我们也可以使用catch方法来处理Promise.all中任何一个Promise对象变为rejected状态的情况。以下是一个演示错误处理的示例：

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 3 is resolved');
  }, 3000);
});

const promise4 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 4 is rejected');
  }, 1500);
});

Promise.all([promise3, promise4])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error);
  });

在上面的示例中，第二个Promise对象promise4会在1.5秒后被reject，因此整个Promise.all会被rejected。在这种情况下，catch方法会被调用，打印出包含了错误信息的字符串。

Promise.all的应用场景

Promise.all方法在实际开发中有许多应用场景，其中最常见的一个是同时请求多个数据并且等待它们全部返回之后再进行后续操作。下面是一个简单的示例：

const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];

const promises = urls.map(url => fetchData(url));

Promise.all(promises)
  .then((results) => {
    results.forEach((data, index) => {
      console.log(`Data from ${urls[index]}:`, data);
    });
  })
  .catch((error) => {
    console.error(error);
  });

在上面的示例中，我们通过fetchData函数来请求多个URL返回的数据，并将包含了多个Promise对象的数组传递给Promise.all方法。在所有数据都返回后，我们可以对每个数据进行进一步的处理。