掌握Promise.all、Promise.race等各类方法，掌控异步编程

2023-09-05 22:12:49

前言

随着前端应用的日益复杂，异步编程成为了一门必备的技能。而Promise作为JavaScript中处理异步操作的利器，在开发中发挥着至关重要的作用。本文将深入讲解Promise.all、Promise.race、Promise.allSettled和Promise.any等各类方法的实现，帮助读者掌握异步编程的精髓，应对复杂场景下的开发需求。

Promise.all

Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例。当所有传入的Promise实例都成功resolved时，新创建的Promise实例才会resolved，其结果是一个包含所有传入Promise实例结果的数组。如果其中任何一个Promise实例被rejected，新创建的Promise实例也会被rejected，其结果为第一个被rejected的Promise实例的错误信息。

语法

Promise.all(iterable)

参数

iterable：一个包含多个Promise实例的可迭代对象。

返回值

一个新的Promise实例，其结果是一个包含所有传入Promise实例结果的数组。

示例

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject(4);
const promise3 = Promise.resolve(5);

Promise.all([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // [3, 4, 5]
  })
  .catch(error => {
    console.log(error); // 4
  });

Promise.race

Promise.race()方法用于将多个Promise实例包装成一个新的Promise实例。当任何一个传入的Promise实例率先resolved或rejected时，新创建的Promise实例也会立即resolved或rejected，其结果为率先resolved或rejected的Promise实例的结果或错误信息。

语法

Promise.race(iterable)

参数

iterable：一个包含多个Promise实例的可迭代对象。

返回值

一个新的Promise实例，其结果为率先resolved或rejected的Promise实例的结果或错误信息。

示例

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject(4);
const promise3 = Promise.resolve(5);

Promise.race([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // 3
  })
  .catch(error => {
    console.log(error); // 4
  });

Promise.allSettled

Promise.allSettled()方法用于将多个Promise实例包装成一个新的Promise实例。无论所有传入的Promise实例是resolved还是rejected，新创建的Promise实例都会resolved，其结果是一个包含所有传入Promise实例结果或错误信息的数组。

语法

Promise.allSettled(iterable)

参数

iterable：一个包含多个Promise实例的可迭代对象。

返回值

一个新的Promise实例，其结果是一个包含所有传入Promise实例结果或错误信息的数组。

示例

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject(4);
const promise3 = Promise.resolve(5);

Promise.allSettled([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // [{status: 'fulfilled', value: 3}, {status: 'rejected', reason: 4}, {status: 'fulfilled', value: 5}]
  });

Promise.any

Promise.any()方法用于将多个Promise实例包装成一个新的Promise实例。当任何一个传入的Promise实例率先resolved时，新创建的Promise实例也会立即resolved，其结果为率先resolved的Promise实例的结果。如果所有传入的Promise实例都被rejected，新创建的Promise实例也会被rejected，其结果为最后一个被rejected的Promise实例的错误信息。

语法

Promise.any(iterable)

参数

iterable：一个包含多个Promise实例的可迭代对象。

返回值

一个新的Promise实例，其结果为率先resolved的Promise实例的结果。

示例

const promise1 = Promise.resolve(3);
const promise2 = Promise.reject(4);
const promise3 = Promise.reject(5);

Promise.any([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // 3
  })
  .catch(error => {
    console.log(error); // 5
  });