IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    手写promise简化版思路

    HUMILITY发表于 2023-12-25 18:00:28
    love 0

    对手写思路进行说明

    构造函数 constructor(executor)

    • 接收一个执行器函数 executor,该函数接受两个参数:resolve 和 reject。
    • 初始状态 status 设为 'pending',表示 Promise 尚未决议。
    • value 属性用于存储 Promise 解决(fulfilled)或拒绝(rejected)时传递的值。
    • onFulfilledCallbacks 和 onRejectedCallbacks 用于存储 .then 或 .catch 中注册的回调函数,这些回调在 Promise 解决或拒绝时执行。

    resolve 和 reject 函数

    • resolve(value) 和 reject(reason) 函数改变 Promise 的状态并设置 value,然后执行对应的回调函数列表。
    • 这两个函数检查当前状态是否为 'pending',以防止 Promise 状态被多次改变。
    • 当 resolve 被调用时,状态变为 'fulfilled',并异步执行所有 onFulfilledCallbacks 中的函数。
    • 当 reject 被调用时,状态变为 'rejected',并异步执行所有 onRejectedCallbacks 中的函数。

    then(onFulfilled, onRejected)

    • then 方法接收两个参数:onFulfilled 和 onRejected,它们分别是 Promise 解决或拒绝时的回调函数。
    • 提供默认函数以确保即使未传递这些函数,then 方法也能正常返回一个新的 Promise。
    • 根据当前 Promise 的状态,决定立即执行回调还是将回调加入对应的回调列表。
    • 返回一个新的 SimplePromise 对象,允许链式调用。

    链式调用和异步执行

    • then 和 catch 方法通过返回新的 SimplePromise 实例来支持链式调用。
    • 异步执行回调是通过将回调函数包裹在 setTimeout 中实现的,确保回调总是在函数执行栈清空后异步执行。

    错误处理

    • 在 executor 执行或回调函数执行中捕获异常,并将异常作为拒绝的理由传递给 reject 函数。

    catch(onRejected)

    • catch 方法是 then 方法的语法糖,只处理拒绝的情况。

    这个 SimplePromise 类实现了 then 和 catch,但没有实现 Promise 的全部功能,例如 Promise.all, Promise.race, Promise.resolve, Promise.reject 等静态方法。此外,这个实现也没有处理一些边缘情况,例如处理链式调用中返回自身的 Promise,或者处理 then 中返回另一个 Promise 的情况。这些都是在完整的、遵循 Promises/A+ 规范的实现中需要考虑的复杂性。

    class SimplePromise {
        constructor(executor) {
          // 初始化状态为 'pending'
          this.status = 'pending';
          // value 用于保存成功或失败的返回值
          this.value = null;
          // 保存成功和失败的处理函数
          this.onFulfilledCallbacks = [];
          this.onRejectedCallbacks = [];
      
          // 成功处理函数
          const resolve = (value) => {
            if (this.status === 'pending') {
              this.status = 'fulfilled';
              this.value = value;
              this.onFulfilledCallbacks.forEach((callback) => callback(value));
            }
          };
      
          // 失败处理函数
          const reject = (reason) => {
            if (this.status === 'pending') {
              this.status = 'rejected';
              this.value = reason;
              this.onRejectedCallbacks.forEach((callback) => callback(reason));
            }
          };
      
          // 立即执行executor,并传入resolve和reject
          try {
            executor(resolve, reject);
          } catch (error) {
            reject(error);
          }
        }
      
        then(onFulfilled, onRejected) {
          // 如果onFulfilled不是函数,提供一个默认函数,返回value
          onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
          // 如果onRejected不是函数,提供一个默认函数,抛出错误
          onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };
      
          // 返回一个新的Promise
          return new SimplePromise((resolve, reject) => {
            // 如果状态已经确定为fulfilled,立即执行onFulfilled
            if (this.status === 'fulfilled') {
              setTimeout(() => {
                try {
                  const result = onFulfilled(this.value);
                  resolve(result);
                } catch (error) {
                  reject(error);
                }
              });
            }
      
            // 如果状态已经确定为rejected,立即执行onRejected
            if (this.status === 'rejected') {
              setTimeout(() => {
                try {
                  const result = onRejected(this.value);
                  reject(result);
                } catch (error) {
                  reject(error);
                }
              });
            }
      
            // 如果状态仍然是pending,将onFulfilled和onRejected放入对应的处理数组中
            if (this.status === 'pending') {
              this.onFulfilledCallbacks.push((value) => {
                try {
                  const result = onFulfilled(value);
                  resolve(result);
                } catch (error) {
                  reject(error);
                }
              });
      
              this.onRejectedCallbacks.push((reason) => {
                try {
                  const result = onRejected(reason);
                  reject(result);
                } catch (error) {
                  reject(error);
                }
              });
            }
          });
        }
      
        catch(onRejected) {
          // catch是then的一个语法糖,只提供onRejected处理函数
          return this.then(null, onRejected);
        }
      }
    
    //   示例1:resolve
    const promise1 = new SimplePromise((resolve, reject) => {
        resolve('test resolve')
    })
    promise1.then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    })
    // 示例2:rejected
    const promise2 = new SimplePromise((resolve, reject) => {
        reject('test reject')
    })
    promise2.then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
    // 示例3 异步操作
    const promise3 = new SimplePromise((resolve, reject) => {
        setTimeout(() => {
            resolve('test after timeout')
        }, 1000);
    })
    promise3.then(res => {
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })
    // 示例4:异步调用
    const promise4 = new SimplePromise((resolve, reject) => {
        resolve(1)
    })
    promise4.then(res => {
        console.log(res)
        return res + 1
    }).then(res => {
        console.log(res)
        return res + 1
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })


沪ICP备19023445号-2号
友情链接