洞悉Promise的奥秘：Promise、Promise.all、Promise.race的用法指南

2023-11-13 01:23:57

Promise：异步编程的利器

Promise是JavaScript中用于处理异步操作的利器，它提供了一种更简洁、更易读的方式来编写异步代码，避免了层层嵌套的回调函数带来的混乱。Promise对象代表一个异步操作的结果，它可以处于三种状态之一：等待态（Pending）、执行态（Fulfilled）或拒绝态（Rejected）。

要使用Promise，需要先创建一个Promise对象，然后通过调用resolve()或reject()方法来改变它的状态。当Promise的状态改变时，就会触发相应的回调函数，您可以通过then()方法来添加这些回调函数。

例如，以下代码演示了如何使用Promise来获取一个API的响应：

const promise = fetch('https://example.com/api/data');

promise
  .then(response => response.json())
  .then(data => {
    // 处理获取到的数据
  })
  .catch(error => {
    // 处理错误
  });

Promise.all：并发执行多个Promise

Promise.all()方法可以并发执行多个Promise，并返回一个新的Promise对象。该Promise对象的状态取决于传入的Promise对象的状态：如果所有的Promise对象都执行成功，则新的Promise对象的状态为执行态；如果任何一个Promise对象执行失败，则新的Promise对象的状态为拒绝态。

例如，以下代码演示了如何使用Promise.all()方法来并发执行多个API请求：

const promises = [
  fetch('https://example.com/api/data1'),
  fetch('https://example.com/api/data2'),
  fetch('https://example.com/api/data3'),
];

Promise.all(promises)
  .then(responses => {
    // 处理获取到的所有数据
  })
  .catch(error => {
    // 处理错误
  });

Promise.race：最快完成的Promise

Promise.race()方法返回一个新的Promise对象，该对象的状态取决于传入的Promise对象中最快完成的Promise对象的状态。如果其中任何一个Promise对象执行成功，则新的Promise对象的状态为执行态；如果其中任何一个Promise对象执行失败，则新的Promise对象的状态为拒绝态。

例如，以下代码演示了如何使用Promise.race()方法来获取多个API请求中最快的响应：

const promises = [
  fetch('https://example.com/api/data1'),
  fetch('https://example.com/api/data2'),
  fetch('https://example.com/api/data3'),
];

Promise.race(promises)
  .then(response => {
    // 处理获取到的最快响应
  })
  .catch(error => {
    // 处理错误
  });