Promise 的扩展方法

Promise 是 JavaScript 中处理异步操作的一种方式，它提供了一种简单、直接的方式来处理异步操作。在 Promise 中，我们使用一组接口来处理异步操作的状态，以及获取异步操作的结果。虽然 Promise 本身是一个强大的工具，但是一些扩展方法可以使其更加强大，同时也更方便使用和维护。

Promise.finally()

Promise.finally() 方法用于指定一个在 Promise 对象完成之后会被执行的回调函数。该回调函数会在任何情况下都会被执行，无论 Promise 是否成功或失败，以及是否调用了 catch() 方法。

const p = Promise.resolve(1);

p.then(res => console.log(res))
 .finally(() => console.log('finally'));

输出结果为：

1
finally

我们可以看到在 Promise 成功后，finally() 方法也被执行了。如果 Promise 失败或未调用 catch() 方法，finally() 方法仍然会被执行。

Promise.allSettled()

Promise.allSettled() 方法接受一组 Promise 对象，并返回一个新的 Promise 对象。当所有 Promise 对象都已经被 settled（即已经成功或失败）后，该新的 Promise 对象会被 resolved，返回一个包含了所有 Promise 对象的结果数组。

const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then(results => console.log(results));

输出结果为：

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: 2 },
  { status: 'fulfilled', value: 3 }
]

我们可以看到结果数组中包含了所有 Promise 对象的结果状态和值，以及失败的原因。

Promise.any()

Promise.any() 方法接受一组 Promise 对象，并返回一个新的 Promise 对象。当其中任意一个 Promise 对象成功后，该新的 Promise 对象会被 resolved，返回该 Promise 对象的值。如果所有 Promise 对象都失败，则该新的 Promise 对象也会被 rejected。

const p1 = Promise.reject(1);
const p2 = Promise.resolve(2);
const p3 = Promise.reject(3);

Promise.any([p1, p2, p3])
  .then(result => console.log(result))
  .catch(error => console.log(error));

输出结果为：

2

我们可以看到 Promise.any() 方法在 p2 成功后被 resolved，并返回 p2 的值。

Promise.race()

Promise.race() 方法接受一组 Promise 对象，并返回一个新的 Promise 对象。当其中任意一个 Promise 对象 settled（即已经成功或失败）后，该新的 Promise 对象会被 resolved 或 rejected，返回该 Promise 对象的结果或失败原因。

const p1 = new Promise(resolve => setTimeout(() => resolve(1), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve(2), 2000));

Promise.race([p1, p2])
  .then(result => console.log(result))
  .catch(error => console.log(error));

输出结果为：

1

我们可以看到 Promise.race() 方法在 p1 成功后被 resolved，并返回 p1 的值。

总结

使用 Promise 扩展方法可以使 Promise 更加强大和方便使用，同时也能提高代码的可读性和维护性。我们可以根据应用场景和需求来灵活选择不同的扩展方法，并合理使用它们，以达到更好的开发效果和用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e55077d4982a6eb7dac9c