Promise 中的解决多个异步请求的技巧

在前端开发中，经常需要处理多个异步请求的情况。比如，我们需要获取用户的基本信息和订单信息，这两个请求都是异步的，我们不能确定哪个会先返回结果。在这种情况下，Promise 就成为了我们的救命稻草。

Promise 的基本概念

Promise 是 ES6 提供的一种异步编程的解决方案，它的主要作用是解决回调地狱的问题。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当 Promise 对象的状态改变时，会触发相应的回调函数。

Promise 对象有两个重要的方法：then() 和 catch()。then() 方法用于指定 Promise 对象的成功和失败的回调函数，catch() 方法用于指定 Promise 对象的失败的回调函数。另外，Promise 对象还有一个静态方法 all()，用于处理多个异步请求。

Promise.all() 方法

Promise.all() 方法用于处理多个异步请求，它的参数是一个由 Promise 对象组成的数组。当所有的 Promise 对象都成功时，Promise.all() 返回一个新的 Promise 对象，它的状态为 fulfilled，回调函数的参数是一个数组，数组中包含了所有 Promise 对象的返回结果。如果其中有一个 Promise 对象失败，Promise.all() 返回的 Promise 对象的状态为 rejected，回调函数的参数是失败的 Promise 对象的返回值。

下面是一个示例代码：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2 resolved');
  }, 2000);
});

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ['promise1 resolved', 'promise2 resolved']
  })
  .catch((error) => {
    console.log(error);
  });

在上面的代码中，我们创建了两个 Promise 对象，它们分别在 1 秒和 2 秒后返回结果。然后，我们使用 Promise.all() 方法处理这两个 Promise 对象。当两个 Promise 对象都成功时，Promise.all() 返回一个新的 Promise 对象，它的状态为 fulfilled，回调函数的参数是一个数组，数组中包含了所有 Promise 对象的返回结果。在本例中，回调函数的参数是 ['promise1 resolved', 'promise2 resolved']。

Promise.race() 方法

Promise.race() 方法也用于处理多个异步请求，它的参数是一个由 Promise 对象组成的数组。与 Promise.all() 不同的是，当其中有一个 Promise 对象成功或失败时，Promise.race() 返回的 Promise 对象就会立即返回，回调函数的参数是成功或失败的 Promise 对象的返回值。

下面是一个示例代码：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('promise2 rejected');
  }, 2000);
});

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

在上面的代码中，我们创建了两个 Promise 对象，它们分别在 1 秒和 2 秒后返回结果。然后，我们使用 Promise.race() 方法处理这两个 Promise 对象。由于 promise2 在 2 秒后返回结果，它就成为了 Promise.race() 返回的 Promise 对象的结果，回调函数的参数是 'promise2 rejected'。

总结

Promise 是一种非常强大的异步编程解决方案，它可以帮助我们处理多个异步请求的情况。Promise.all() 方法用于处理所有 Promise 对象都成功的情况，Promise.race() 方法用于处理其中一个 Promise 对象成功或失败的情况。在实际开发中，我们可以根据具体的需求选择使用哪种方法，以达到最佳的效果。

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