对Promise.allSettled()和Promise.race()的实现的理解

#每日学习前端#

Promise.allSettled(iterable)
- 参数：一个以 promise 组成的可迭代对象（例如 Array）对象
- 返回值：一个 Promise 通过当前Promise可以获取到传入的这组promise的返回值，无论是已兑现还是未兑现状态

Promise.all() 
- 参数：一个以 promise 组成的可迭代对象（例如 Array）对象
- 返回值：一个 Promise
同样返回一个promise 但是只有所有的promise都兑现之后才会走到成功的回调，只要有一个promise没有兑现，最终返回的promise就是被拒绝的状态

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("P1");
  }, 0);
});
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("P2");
  }, 5000);
});
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("P3");
  }, 3000);
});
const p4 = Promise.reject("p4-err");
const p5 = Promise.reject("p5-err");

// 如果传入的参数有promie.reject 则只有rejected一种状态
Promise.all([p1, p2, p3, p4, p5])
  .then(() => {
    console.log("ok");
  })
  .catch((err) => {
    console.log(err); // p4-err
  });

function allSettled(promises) {
  return new Promise((resolve, reject) => {
    let res = [],
      count = 0;

    //收集多个promise返回的结果
    function getRes(status, value, index) {
      res[index] = {
        status,
        value,
      };
      count++;
      if (count === promises.length) {
        resolve(res);
      }
    }
    promises.forEach((promise, index) => {
      if (promise instanceof Promise) {
        promise.then(
          (res) => {
            getRes("success", res, index);
          },
          (err) => {
            getRes("fail", err, index);
          }
        );
      } else {
        getRes("success", promise, index);
      }
    });
  });
}
allSettled([p1, p2, p3]).then((res) => {
  console.log("最终所有promise的结果收集", res);
});

Promise.race()

接受一个 promise 可迭代对象作为输入，并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的敲定而敲定。

function race(promises) {
  return new Promise((resove, reject) => {
    promises.forEach((promise) => {
      if (promise instanceof Promise) {
        promise.then(
          (res) => {
            resove(res);
          },
          (err) => {
            reject(err);
          }
        );
      } else {
        resove(res);
      }
    });
  });
}
race([p1, p2, p3]).then((res) => {
  console.log("哪个promise先执行完成呢", res);
});

不积跬步，无以至千里；不积小流，无以成江海。奥利给~