浦弟带你一步一步写Promise

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

      class MyPromise {
        #state = "pending"; //promise的初始状态为pending
        #value = undefined; //存储解析值
        #reason = undefined; //存储拒绝原因
        #onResolveCallbacks = []; //Promise resolve时的回调函数集，因为在Promise结束之前可能有多个回调添加到它上面
        #onRejectCallbacks = []; //Promise reject时的回调函数集，因为在Promise结束之前有可能有多个回调添加到它上面

        constructor(executor) {
          //构造函数接受一个函数，这个函数有两个参数：resolve和reject
            executor(resolve, reject); // 执行器函数接收两个参数，并在创建Promise的时候直接调用 resolve 或 reject
          }
      }

上面基本上实现了Promise构造函数的主体，但是有两个问题：
1.我们给executor函数传了两个参数：resolve和reject，这两个参数目前还没有定义
2.executor有可能会出错（throw），类似下面这样，而如果executor出错，Promise应该被其throw出的值reject

 class MyPromise {
        #state = "pending"; //promise的初始状态为pending
        #value = undefined; //存储解析值
        #reason = undefined; //存储拒绝原因
        #onResolveCallbacks = []; //Promise resolve时的回调函数集，因为在Promise结束之前可能有多个回调添加到它上面
        #onRejectCallbacks = []; //Promise reject时的回调函数集，因为在Promise结束之前有可能有多个回调添加到它上面

   
        constructor(executor) {
          //构造函数接受一个函数，这个函数有两个参数：resolve和reject
          const resolve = (value) => {
       		//TODO
          };

          const reject = (reason) => {
          	//TODO
          };
          try {
            executor(resolve, reject); // 执行器函数接收两个参数，并在创建Promise的时候直接调用 resolve 或 reject
          } catch (error) {
            reject(error); // 如果执行器函数抛出错误，则将 Promise 状态设置为 rejected
          }
        }
     }

接下来我们实现resolve和reject这两个函数
基本上就是判断状态为pending之后把状态改为相应的值，并把对应的value和reason存起来，之后执行相应的回调函数了

		  const resolve = (value) => {
            if (this.#state === "pending") {
              this.#state = "fulfilled"; // 将 Promise 状态设置为 fulfilled（已完成）
              this.#value = value; // 存储解析值
              // 异步执行所有已注册的成功回调函数，确保他们在当前任务完成后被调用，因为promise执行是在事件循环的微任务中
              for (const callback of this.#onResolveCallbacks) {
                callback(this.#value);
              }
            }
          };

          const reject = (reason) => {
            if (this.#state === "pending") {
              this.#state = "rejected"; // 将 Promise 状态设置为 rejected（已拒绝）
              this.#reason = reason; // 存储拒绝原因
              if (this.#onRejectCallbacks.length) {
                // 如果存在已注册的失败回调函数，则异步执行它们
                for (const callback of this.#onRejectCallbacks) {
                  callback(this.#reason);
                }
              } else {
                // 如果没有注册的失败回调函数，则抛出拒绝原因
                throw this.#reason;
              }
            }
          };

接下来写then方法
Promise对象有一个then方法，用来注册在这个Promise状态确定后的回调，在Promise/A标准种，明确规定then要返回一个新的Promise对象
then方法接收两个参数，onFulfilled, onRejected，分别为Promise成功或失败后的回调

        then(onFulfilled, onRejected) {
          return new MyPromise((resolve, reject) => {
         		//TODO
          });
        }

Promise总共有三种可能的状态，fulfilled，rejected和pending，then函数中resolveWrapper和rejectWrapper这两个函数就是简单的执行resolve和reject，比较简单

 then(onFulfilled, onRejected) {
          return new MyPromise((resolve, reject) => {
            const resolveWrapper = (value) => {
              try {
                if (typeof onFulfilled === "function") {
                  const result = onFulfilled(value);
                  resolve(result);
                } else {
                  resolve(value);
                }
              } catch (error) {
                reject(error);
              }
            };

            const rejectWrapper = (reason) => {
              try {
                if (typeof onRejected === "function") {
                  const result = onRejected(reason);
                  resolve(result);
                } else {
                  reject(reason);
                }
              } catch (error) {
                reject(error);
              }
            };

            if (this.#state === "fulfilled") {
              setTimeout(() => {
                resolveWrapper(this.#value);
              });
            } else if (this.#state === "rejected") {
              setTimeout(() => {
                rejectWrapper(this.#reason);
              });
            } else {
              //当状态为pending的时候，意味着既没成功，也没是啊比，在这种情况下，两个数组会收集传入的then方法的回调函数
              this.#onResolveCallbacks.push(resolveWrapper);
              this.#onRejectCallbacks.push(rejectWrapper);
            }
          });
        }

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章