JavaScript中Promise.all作用

JavaScript中Promise.all作用

Promise.all 是 JavaScript 中用于处理多个异步操作的方法。它接收一个 Promise 数组作为参数，并返回一个新的 Promise。以下是 Promise.all 的作用和使用方法：

1. 作用

• 并行执行：

  • Promise.all 会并行执行所有传入的 Promise。

• 全部成功：

  • 当所有 Promise 都成功时，返回一个包含所有结果的数组。

• 任意失败：

  • 如果任意一个 Promise 失败，立即返回失败的原因。

2. 使用方法

Promise.all(iterable);

• iterable：一个可迭代对象（如数组），包含多个 Promise。

• 返回值：

  • 返回一个新的 Promise，其状态由传入的 Promise 决定。

3. 示例

• 全部成功：

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

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

• 任意失败：

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

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

4. 使用场景

• 并行请求：

  • 同时发起多个网络请求，等待所有请求完成后再处理结果。

• 依赖多个异步操作：

  • 需要多个异步操作都成功后才能继续执行后续逻辑。

5. 手写实现

function myPromiseAll(promises) {
 return new Promise((resolve, reject) => {
   const results = [];
   let completedCount = 0;

   promises.forEach((promise, index) => {
     Promise.resolve(promise)
       .then(result => {
         results[index] = result;
         completedCount++;
         if (completedCount === promises.length) {
           resolve(results);
         }
       })
       .catch(error => {
         reject(error);
       });
   });
 });
}

总结

特性	描述
并行执行	同时执行所有 Promise
全部成功	返回所有结果的数组
任意失败	立即返回失败的原因
使用场景	并行请求、依赖多个异步操作

Promise.all 是处理多个异步操作的强大工具，合理使用可以提高代码的效率和可读性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github