【Promise】掌握 Promise.all并行处理异步操作

Promise.all

Promise.all 是 JavaScript 中 Promise 对象的一个静态方法。它接受一个可迭代的 Promise 对象（如数组），并返回一个新的 Promise 对象。这个新的 Promise 对象在所有输入的 Promise 对象都成功完成时才会成功，如果任何一个 Promise 对象失败，则立即失败。

基本用法

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 输出: [1, 2, 3]
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，Promise.all 接收一个包含三个 Promise 对象的数组，并在所有 Promise 都成功完成后，返回一个包含所有结果的数组。

处理异步操作

Promise.all 在处理多个异步操作时非常有用。

const fetchDataFromApi1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchDataFromApi2 = fetch('https://api.example.com/data2').then(response => response.json());
const fetchDataFromApi3 = fetch('https://api.example.com/data3').then(response => response.json());

Promise.all([fetchDataFromApi1, fetchDataFromApi2, fetchDataFromApi3])
  .then(([data1, data2, data3]) => {
    console.log('Data from API 1:', data1);
    console.log('Data from API 2:', data2);
    console.log('Data from API 3:', data3);
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
  });

在这个例子中，我们并行地从三个不同的 API 端点获取数据，并在所有数据都成功返回后进行处理。

错误处理

Promise.all 的一个关键特性是，如果任何一个 Promise 失败，整个 Promise.all 就会失败。这使得错误处理变得非常简单：

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Something went wrong'));
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // 不会执行到这里
  })
  .catch((error) => {
    console.error(error); // 输出: Error: Something went wrong
  });

在这个例子中，由于 promise2 失败，Promise.all 立即进入 catch 块，并捕获到 promise2 的错误。

实际应用场景

1. 批量上传文件
   假设你需要上传多个文件到服务器，可以使用 Promise.all 来并行处理这些上传操作：

const uploadFile = (file) => {
  return fetch('https://api.example.com/upload', {
    method: 'POST',
    body: file
  }).then(response => response.json());
};

const files = [file1, file2, file3];

Promise.all(files.map(file => uploadFile(file)))
  .then((results) => {
    console.log('All files uploaded successfully:', results);
  })
  .catch((error) => {
    console.error('Error uploading files:', error);
  });

2. 并行执行多个定时任务
   假设你需要在特定时间点执行多个定时任务，可以使用 Promise.all 来并行处理这些任务：

const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

const task1 = delay(1000).then(() => console.log('Task 1 done'));
const task2 = delay(2000).then(() => console.log('Task 2 done'));
const task3 = delay(3000).then(() => console.log('Task 3 done'));

Promise.all([task1, task2, task3])
  .then(() => {
    console.log('All tasks completed');
  })
  .catch((error) => {
    console.error('Error executing tasks:', error);
  });