手写 Promise 静态方法

已于 2023-03-26 02:29:30 修改
阅读量796 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 promise race 面试
于 2023-03-26 02:29:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43220213/article/details/129775183
版权
本文详细介绍了如何手写JavaScript中的Promise核心方法，包括resolve、reject、all、allSettled、race和any的实现逻辑，并通过示例代码进行测试，帮助读者深入理解Promise的工作机制和异步处理的原理。
摘要由CSDN通过智能技术生成

文章目录

手写 promise

前置背景：大白话手写 promise

resolve、reject

作为类直接调用的方法，自然是静态方法。
**resolve 与 reject 的原理都是内部自己实例化了一个 promise，然后去调用 resolve 或 reject。**本质和自己实例化 promise 调用没啥区别。

class LcPromise {
  constructor(executed) {}
  then(onFulfilled, onRejected) {}
	catch(onRejected) {}
  finally(fn) {}

  static resolve(value) {
    return new LcPromise((resolve, reject) => resolve(value))
  }

  static reject(reason) {
    return new LcPromise((resolve, reject) => reject(reason))
  }
}

all、allSettled

all 方法的用法：接收一个 promise 实例数组，等待数组中所有的 promise fulfilled 后将调用 then 的 onFulfilled，只要其中有一个promise rejected，就立即调用 then 的 onRejected。

Promise.all([]).then(onFulfilled).catch(onRejected)

由此可知 all 肯定返回一个 promise 实例，要不然咋调用 then。我们可以一个一个等待数组中 promise 实例的结果，当 promise 实例全部执行的是 onFulfilled，那就说明整个 all 已经是 fulfilled 状态，resolve all 返回的 promise 实例。如果其中一个执行 onRejected，则说明 all 中出现错误，整个 all 的 promise 实例就可以 reject 了。
整个问题的关键就在于 all 返回的 promise 什么时候执行 resolve，什么时候执行 reject。

static all(promiseArr) {
  const allResult = [];
  return new LcPromise((resolve, reject) => {
    promiseArr.forEach((promise) => {
      // 执行每个 promise 实例
      promise.then(
        (res) => {
          // 收集每个 promise 的成功结果
          allResult.push(res);
          // 当收集完所有的 promise，说明整体的 promise 应该为 fulfilled 状态了，执行 resolve
          if (allResult.length === promiseArr.length) resolve(allResult);
        },
        (err) => {
          // 只要有一个 promise rejected 了，就执行整个 promise 的 reject 函数
          reject(err);
        }
      );
    });
  });
}

allSettled 与 all 差不多，区别就是当 allSettled 接收的 promise 数组中存在 reject 的 promise 时，它不会中断整个 allSettled 函数的执行，allSettled 返回的 promise 不会变成 rejected，依然为 pending，继续执行数组中后续的 promise。说明 allSettled 返回的 promise 不会执行 reject 函数，它最后一定是 fulfilled 状态。对于数组中 rejected 状态的 promise，allSettled 的返回值是一个数组对象。对象中包含了每个 promise 的状态和结果或错误信息。

static allSettled(promiseArr) {
  const allResult = [];
  return new LcPromise((resolve, reject) => {
    promiseArr.forEach((promise) => {
      promise.then(
        (res) => {
          allResult.push({ status: "fulfilled", res: res });
          if (allResult.length === promiseArr.length) resolve(allResult);
        },
        (err) => {
          allResult.push({ status: "rejected", err: err });
          if (allResult.length === promiseArr.length) resolve(allResult);
        }
      );
    });
  });
}

测试：

const p1 = new LcPromise((resolve, reject) => {
  resolve(1111);
});
const p2 = new LcPromise((resolve, reject) => {
  // resolve(2222);
  reject("hhh");
});
const p3 = new LcPromise((resolve, reject) => {
  resolve(3333);
});

LcPromise.all([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

// hhh

LcPromise.allSettled([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

// [
//   { status: 'fulfilled', res: 1111 },
//   { status: 'rejected', err: 'hhh' },
//   { status: 'fulfilled', res: 3333 }
// ]

race、any

race 方法的用法：基本也和 all 差不多，区别就是只要数组中有一个 promise 确定了状态就立即确定了整个 race 返回的 promise 的状态。
所以有一个 promise 执行了 then 方法，就可以立即执行整体 promise 的 resolve 方法或 reject 方法。

static race(promiseArr) {
  return new LcPromise((resolve, reject) => {
    promiseArr.forEach((promise) => {
      // 有一个 promise 确定了状态，就立即确定了整体 promise 的状态
      promise.then(res => {
        resolve(res)
      }, err => {
        reject(err)
      })
    })
  })
}

any 的用法是，只要数组中有一个 promise 为 fulfilled 就执行 resolve，整体 promise 为 fulfilled。当数组中所有 promise 为 rejected 才执行 reject 函数，整体为 rejected，并且返回一个包含所有错误信息的合并错误数组new AggregateError(arr)。
注意这个构造函数 nodejs 没有实现，只能在浏览器中测试。它有一个 errors 属性，可以查看错误信息。

static any(promiseArr) {
  return new LcPromise((resolve, reject) => {
    const reasonArr = []
    promiseArr.forEach((promise) => {
      promise.then(res => {
        resolve(res)
      }, err => {
        reasonArr.push(err)
        if (promiseArr.length === reasonArr.length) reject(new AggregateError(reasonArr))
      })
    })
  })
}

测试：

const p1 = new LcPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1111);
  }, 3000);
});
const p2 = new LcPromise((resolve, reject) => {
  // resolve(2222);
  setTimeout(() => {
    reject("hhh");
  }, 1000);
});
const p3 = new LcPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(3333);
  }, 2000);
});

LcPromise.race([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

// hhh 打印最快确定状态的信息

// 所有 promise rejected 的情况
const p1 = new LcPromise((resolve, reject) => {
  setTimeout(() => {
    // resolve(1111);
    reject("h1");
  }, 3000);
});
const p2 = new LcPromise((resolve, reject) => {
  // resolve(2222);
  setTimeout(() => {
    reject("h2");
  }, 1000);
});
const p3 = new LcPromise((resolve, reject) => {
  setTimeout(() => {
    // resolve(3333);
    reject("h3");
  }, 2000);
});

LcPromise.any([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log(err.errors));

// (3) ['h2', 'h3', 'h1']

完整的 promise

const PROMISE_STATUS_PENDING = "pending";
const PROMISE_STATUS_FULFILLED = "fulfilled";
const PROMISE_STATUS_REJECTED = "rejected";

const execFunctionWithCatchError = (execFn, value, resolve, reject) => {
  try {
    const res = execFn(value);
    resolve(res);
  } catch (error) {
    reject(error);
  }
};

class LcPromise {
  constructor(executed) {
    this.status = PROMISE_STATUS_PENDING;

    this.value = undefined;
    this.reason = undefined;

    this.onFulfilledFns = [];
    this.onRejectedFns = [];

    const resolve = (value) => {
      this.value = value;
      queueMicrotask(() => {
        if (this.status != PROMISE_STATUS_PENDING) return;
        this.status = PROMISE_STATUS_FULFILLED;
        this.onFulfilledFns.forEach((fns) => fns(this.value));
      });
    };
    const reject = (reason) => {
      this.reason = reason;
      queueMicrotask(() => {
        if (this.status != PROMISE_STATUS_PENDING) return;
        this.status = PROMISE_STATUS_REJECTED;
        this.onRejectedFns.forEach((fns) => fns(this.reason));
      });
    };

    executed(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    onFulfilled = onFulfilled || ((value) => value);
    onRejected =
      onRejected ||
      ((err) => {
        throw err;
      });

    return new LcPromise((resolve, reject) => {
      // 在 resolve reject 中执行
      if (onFulfilled)
        this.onFulfilledFns.push(() => {
          execFunctionWithCatchError(onFulfilled, this.value, resolve, reject);
        });
      if (onRejected)
        this.onRejectedFns.push(() => {
          execFunctionWithCatchError(onRejected, this.reason, resolve, reject);
        });

      // 在自身中执行
      if (this.status === PROMISE_STATUS_FULFILLED) {
        execFunctionWithCatchError(onFulfilled, this.value, resolve, reject);
      }
      if (this.status === PROMISE_STATUS_REJECTED) {
        execFunctionWithCatchError(onRejected, this.reason, resolve, reject);
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(fn) {
    this.then(fn, fn);
  }

  static resolve(value) {
    return new LcPromise((resolve, reject) => resolve(value));
  }

  static reject(reason) {
    return new LcPromise((resolve, reject) => reject(reason));
  }

  static all(promiseArr) {
    const allResult = [];
    return new LcPromise((resolve, reject) => {
      promiseArr.forEach((promise) => {
        // 执行每个 promise 实例
        promise.then(
          (res) => {
            // 收集每个 promise 的成功结果
            allResult.push(res);
            // 当收集完所有的 promise，说明整体的 promise 应该为 fulfilled 状态了，执行 resolve
            if (allResult.length === promiseArr.length) resolve(allResult);
          },
          (err) => {
            // 只要有一个 promise rejected 了，就执行整个 promise 的 reject 函数
            reject(err);
          }
        );
      });
    });
  }

  static allSettled(promiseArr) {
    const allResult = [];
    return new LcPromise((resolve, reject) => {
      promiseArr.forEach((promise) => {
        promise.then(
          (res) => {
            allResult.push({ status: "fulfilled", res: res });
            if (allResult.length === promiseArr.length) resolve(allResult);
          },
          (err) => {
            allResult.push({ status: "rejected", err: err });
            if (allResult.length === promiseArr.length) resolve(allResult);
          }
        );
      });
    });
  }

  static race(promiseArr) {
    return new LcPromise((resolve, reject) => {
      promiseArr.forEach((promise) => {
        promise.then(
          (res) => {
            resolve(res);
          },
          (err) => {
            reject(err);
          }
        );
      });
    });
  }

  static any(promiseArr) {
    return new LcPromise((resolve, reject) => {
      const reasonArr = [];
      promiseArr.forEach((promise) => {
        promise.then(
          (res) => {
            resolve(res);
          },
          (err) => {
            reasonArr.push(err);
            if (promiseArr.length === reasonArr.length)
              reject(new AggregateError(reasonArr));
          }
        );
      });
    });
  }
}
卡列尼娜翠花
关注
专栏目录
【JavaScript】手写 Promise（静态方法）
小秀的博客
02-28 721
方法类似,区别是要获取全部敲定的结果(成功/拒绝),以及获取的结果是对象形式。方法也有点类似,区别是获取第一个兑现,或者是全部拒绝。手写Promise-静态方法allSettled。手写Promise-静态方法resolve。手写Promise-静态方法reject。手写Promise-静态方法race。手写Promise-静态方法all。手写Promise-静态方法any。
手写Promise的静态方法
Sixology的博客
11-06 239
1.手写请求超时方法 let request = ajax('./api'); let timeout = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('timeout'); },5000) }) Promise.race([ request, timeout ]).then((res)=>{ console.log(res); }).catch((err)=&gt
all方法 手写promise_手写Promise - 常用静态方法all、resolve、reject、race
weixin_36315079的博客
12-30 280
先来回顾一下，上一章节之后的代码。class WPromise {static pending = 'pending';static fulfilled = 'fulfilled';static rejected = 'rejected';constructor(executor) {this.status = WPromise.pending; // 初始化状态为pendingthis.valu...
手写Promise和Promise中的静态方法
qq_43178432的博客
08-30 373
Promise
Promise 工具箱：手写实现静态方法的完全指南
~~~
09-01 1479
静态方法是指直接定义在类上的方法，而不是定义在类实例上的方法。它们可以通过类本身调用，而不需要创建类的实例。静态方法通常用于用于在类级别上操作数据和提供一些实用功能，而不需要实例化对象。Promise有很多静态方法，本文就来分享下如何实现这些静态方法。我们可以在Promise 类上通过static关键字直接定义静态方法，来允许对多个 Promise 对象进行操作或直接创建新的 Promise，而无需实例化一个新的 Promise 对象。
手写Promise
黎小小的博客
10-18 252
定义promise的初始状态pending(后面两个状态在执行对应函数resolve和reject后进行更改)实现then方法：传入// 定义成功返回参数。为什在构造器里面定义？// 定义失败返回参数// 定义promise的初始状态pending(后面两个状态在执行对应函数后进行更改)// 定义两个处理函数// 执行回调函数// then方法时MPromise创建的实例调用的所以在constructor外。
手写实现Promise的四个静态方法(resolve、reject、race、all)
weixin_71867652的博客
04-27 169
【代码】手写实现Promise的四个静态方法(resolve、reject、race、all)
手写promise.any
weixin_51676646的博客
05-02 229
手写Promise.any
ES6手写Promise
ruan479118658的博客
08-08 257
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰
手写Promise方法（实现Promise A+规范）
Bulijiujiu的博客
12-18 247
[译]Promise/A+ 规范 ] [ https://zhuanlan.zhihu.com/p/143204897 ]旁白：其实这个解决程序才是实现核心Promise最难的一部分。在构造函数执行后，箭头函数可以绑定实例对象的 this 指向。在构造函数执行后，箭头函数可以绑定实例对象的 this 指向。规范：两个参数作为函数第一次调用优先，以后的调用都会被忽略。pending：待定状态。方法执行后才会由 pending 更改为此状态。方法执行后才会由 pending 更改为此状态。
Promise 的实例方法和静态方法有哪些，如何手动实现？
郊眠寺
06-08 2784
导读：Promise 是异步编程的一种解决方案，比传统的回调函数或事件更合理和更灵活。本文主要展示 Promise 提供的方法列表，以及基本的实现原理。通过本文，我们能加深 Promise 方法的理解和场景使用，对 Promise.all、Promise.race、Promise.allSettled 和 Promise.any 四个方法的异同之处也有更深层次的领悟。Promise 的实例方法有 then/catch/finally 三种，静态方法有 all/race/allSettled/any/reso
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1008
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
React中的refs是什么？
最新发布
Front end development engineer
10-10 248
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1240
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue根实例、实例总结
m0_54007573的博客
10-04 692
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1504
vue-live2d看板娘集成方案设计使用教程
javascript中==和===有什么不同
qq_48763502的博客
10-09 401
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
手写promise的方法
09-01
手写Promise的方法是指通过自己编写代码实现Promise类的相关方法，比如Promise.all和Promise.any。在引用和引用中，作者给出了手写Promise.all和Promise.any的具体实现代码。 对于Promise.all方法的手写实现，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值