0
点赞
收藏
分享

微信扫一扫

牛客--手写Promise.all和Promise.race

凌得涂 2022-04-17 阅读 149
前端

1.Promise.all的特点

1.将多个Promise实例包装成一个新的Promise实例

2.当参数所有promise全部成功时返回成功结果,且结果是所有promise返回成功结果的数数组

3.只要数组中有一个promise失败,则返回失败,结果是第一个失败的promise的值

使用场景:一共三个接口,我们需要拿到前两个接口返回的数据作为第三个接口的参数,需要使用promise.all将前两个接口作为promise传入Promise.all中,如果有一个失败了,就不会调用第三个接口

例子:

 

手写promise.all

<script>
      function promiseAll(promises) {
        return new Promise(function (resolve, reject) {
          // 判断传入的参数是否为数组
          if (!Array.isArray(promises)) {
            throw new Error("ssss");
          }
          // 判断多个Promise都是fulfilled状态,引入计数器
          var resolveCount = 0;
          //创建一个空数组,长度为传入数组的长度
          var promiseNum = promises.length;
          var resolveValues = new Array(promiseNum);
          //遍历传入的数组
          for (let i = 0; i < promiseNum; i++) {
            //  我们期望传入的数组都是Promise,所以先用Promise.reslove包裹
            Promise.resolve(promises[i]).then(
              function (value) {
                // 因为当前只接收fulfilled状态的Promise所以会走then
                resolveCount++;
                //将当前返回值存储到空数组里  这个空数组是最终Promise.all的reslove的值
                resolveValues[i] = value;
                if (resolveCount == promiseNum) {
                  return resolve(resolveValues);
                }
              },
              //如果有一个Promise的状态是rejected,会走下面的代码
              function (reason) {
                return reject(reason);
              }
            );
          }
        });
      }

      var Promise1 = Promise.reject(123);
      var Promise2 = new Promise(function (resolve, reject) {
        setTimeout(resolve, 100, "foo");
      });
      var Promise3 = 42;
      promiseAll([Promise1, Promise2, Promise3])
        .then((result) => {
          console.log(result);
        })
        .catch((error) => {
          console.log(error);
        });
    </script>

2.Promise.race

promise.race使用:Promise.race([p1,p2,p3])里面哪个结果获得的快,就返回那个结果

不管结果本身是成功状态还是失败状态

 <script>
      let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("success");
        }, 1000);
      });
      let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("failed");
        }, 500);
      });

      function promiserace(promises) {
        if (!Array.isArray(promises)) {
          throw new Error("promise must be an array");
        }
        return new Promise(function (resolve, reject) {
          promises.forEach((p) => {
            //遍历Promise 无论reslove还是rejected都会改变最外层的Promise的状态
            // 一旦状态拿到了 就定格不变了
            Promise.resolve(p).then(
              (data) => {
                resolve(data);
              },
              (err) => {
                reject(err);
              }
            );
          });
        });
      }

      promiserace([p1, p2])
        .then((result) => {
          console.log(result);
        })
        .catch((error) => {
          console.log(error);
        });
    </script>

举报

相关推荐

0 条评论