ES6 中的 Promise.all 和 Promise.race-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，JS 开发也变得越来越复杂，经常会面临异步任务处理的问题。ES6 新增了 Promise API 用于解决异步编程问题，而 Promise.all 和 Promise.race 又是其重要的两个方法。

Promise.all

Promise.all 方法支持传入一个 Promise 数组，然后等待所有 Promise 完成后才返回最终的结果。

语法如下：

Promise.all(iterable);

其中 Iterable 是一个具有迭代器接口的对象，比如数组等。Promise.all 方法会将所有传入的 Promise 都统一封装为一个新的 Promise，返回新 Promise。

Promise.all 方法会按照 Promise 对象传入数组的顺序来解决 Promise，结果也按照 Promise 给出的顺序存储在数组中，如果其中任意一个 Promise 被 rejected，新 Promise 也会被 rejected 并返回此 Promise 的错误信息。

下面是一个示例：

const delay = (time) =>
  new Promise((resolve) => setTimeout(() => resolve(time), time));

const promises = [delay(3000), delay(1000), delay(2000)];
Promise.all(promises).then((results) => {
  console.log(results); //[3000, 1000, 2000] 
});

在这个例子中，函数 delay() 会返回一个 Promise，在 Promise.all 方法中传入了三个 delay 函数返回的 Promise，由于 1000 毫秒的 Promise 先完成，接着是 2000 毫秒的，最后是 3000 毫秒的，因此最终的结果数组中的顺序是按照传入的顺序排列的。

Promise.race

Promise.race 方法同样支持传入一个 Promise 数组，但是它只返回最先解决的 Promise 的结果，无论是 resolved 还是 rejected。

语法如下：

Promise.race(iterable);

Promise.race 方法从传入的 Promise 数组中，只要有一个 Promise 状态变化，新 Promise 立即返回该 Promise 的状态。

下面是一个示例：

// javascriptcn.com 代码示例
const delay = (time, state) =>
  new Promise((resolve, reject) =>
    setTimeout(() => {
      if (state) {
        resolve(`resolve: ${time}`);
      } else {
        reject(`reject: ${time}`);
      }
    }, time)
  );

const promises = [delay(3000, false), delay(1000, true), delay(2000, true)];
Promise.race(promises).then(
  (result) => {
    console.log(result); //resolve: 1000
  },
  (error) => {
    console.error(error); //reject: 3000
  }
);

在这个例子中，Promise.race 方法会返回最先完成的 Promise 的结果，因此最后返回的是 delay(1000, true) 的状态信息 —— resolve: 1000。

总结

ES6 中的 Promise.all 和 Promise.race 方法可以很好地解决多个异步任务有序处理和最快响应的问题。学习 Promise API 可以帮助开发者处理复杂的异步编程问题，提高代码品质。

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