JS手写代码篇---Pomise.race

6、promise.race

Promise.race() 静态方法接受一个 promise 可迭代对象作为输入,并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的敲定而敲定。

比如说:

复制代码
    //   原生promiserace;
      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("p1");
        }, 500);
      });
      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("p2");
        }, 100);
      });
      Promise.race([p1, p2]).then((value) => {
        console.log(value); //p1
      });

手写promise.race:

  • 输入可迭代的数组
  • 输出返回应该promise
  • 第一个完成的话就要全部结束,所以我们要设定标志词
  • 如果传入的不是promise怎么办,使用promise.relove将每个元素转换为Promise,以处理非Promise的情况。

代码如下:

复制代码
      //  promise.race
        static race(array){
        // 判断是否为空
        if(array.length === 0){
          return ;
        }
        // 返回应该鑫的promise
        return new Commitment((resolve , reject) => {
                   // 标志
          let close = false;
          // 开始遍历
          array.forEach((item) =>{
            Promise.resolve(item).then((res) => {
              if(!close){
                close = true;
                resolve(res);
              }

            }).catch((error) => {
              if(!close){
                close = true;
                reject(error);
              }
            })

          })

        })
        }

志词

  • 如果传入的不是promise怎么办,使用promise.relove将每个元素转换为Promise,以处理非Promise的情况。

代码如下:

复制代码
      //  promise.race
        static race(array){
        // 判断是否为空
        if(array.length === 0){
          return ;
        }
        // 返回应该鑫的promise
        return new Commitment((resolve , reject) => {
                   // 标志
          let close = false;
          // 开始遍历
          array.forEach((item) =>{
            Promise.resolve(item).then((res) => {
              if(!close){
                close = true;
                resolve(res);
              }

            }).catch((error) => {
              if(!close){
                close = true;
                reject(error);
              }
            })

          })

        })
        }
相关推荐
mCell20 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip20 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript