手写Promise,实现then和catch方法

手写 Promise 类,包含 then 方法和 catch 方法:

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.error = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
      }
    };

    const reject = (error) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.error = error;
        this.onRejectedCallbacks.forEach((callback) => callback(this.error));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error; };

    return new MyPromise((resolve, reject) => {
      const handleFulfilled = () => {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      };

      const handleRejected = () => {
        setTimeout(() => {
          try {
            const result = onRejected(this.error);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      };

      if (this.state === 'fulfilled') {
        handleFulfilled();
      } else if (this.state === 'rejected') {
        handleRejected();
      } else if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(handleFulfilled);
        this.onRejectedCallbacks.push(handleRejected);
      }
    });
  }

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

这个手写的 Promise 类包含 then 方法和 catch 方法,并且能够正常处理 Promise 的链式调用和异常捕获。

测试示例:

const promise = new MyPromise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('Promise resolved');
    // reject(new Error('Promise rejected'));
  }, 1000);
});

promise
  .then((data) => {
    console.log(data); // 输出:Promise resolved
    return 'New data';
  })
  .then((data) => {
    console.log(data); // 输出:New data
    throw new Error('Custom error');
  })
  .catch((error) => {
    console.error(error); // 输出:Custom error
  });

在上面的例子中,我们创建了一个简单的 Promise,并通过 then 方法链式调用,然后使用 catch 方法捕获异常。

全部评论

相关推荐

自由水:这HR已经很好了,多的是已读不回和不读了
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
04-08 05:32
点赞 评论 收藏
分享
评论
3
6
分享

创作者周榜

更多
牛客网
牛客企业服务