浅析 promise.all 与promise.race

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

关于Promise的讲解，不再进行赘述。

本文将对Promise Api中的all & race进行简单的使用讲解

1.Promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。
成功和失败的返回值是不同的：

• 成功的时候返回的是一个结果数组
• 而失败的时候则返回最先被reject失败状态的值。

场景：

• 多个异步结果合并到一起

使用示例如下：

promiseAll() {
      let that = this;
      let p1 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/a")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      let p2 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/b")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      let p3 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/c")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      Promise.all([p1, p2, p3]).then(res => {
        console.log("promise all ", res);
      });
    }

在我们想要在多个请求均成功之后，进行数据融合之类的操作时，就需要Promise.all这个方法。

成功结果如图： 值为promise返回值数组

特别注意：
Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的
（即p1的结果在前，即便p1的结果获取的比p2要晚）

使用好处：
在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

2.Promise.race

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

简单点说：只要其中一个成功或失败，当前方法就会结束，就采用当前成功或失败的值作为它的值

常见使用场景：把异步操作和定时器放到一起，如果定时器先触发，认为超时，告知用户

示例如下：

promiseRace() {
      let that = this;
      let p1 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/a")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      let p2 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/b")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      let p3 = new Promise((resolve, reject) => {
        that.$axios
          .post("/promise/c")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      Promise.race([p1, p2, p3]).then(res => {
        console.log("promise race ", res);
      });
    }

结果如图： 值为一个promise结果

【不喜勿喷】