JavaScript中手写promise

在JavaScript中,Promise 是一个表示异步操作最终完成或失败的对象。它允许你为异步操作的成功结果或失败原因注册处理方法。Promise 对象有以下三种状态:

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

一个基本的 Promise 可以通过以下方式手写实现:

function MyPromise(executor) {
  let self = this;
  self.status = 'pending'; // 初始状态为 pending
  self.value = null; // 成功时的值
  self.reason = null; // 失败时的原因

  // 成功态的处理函数集
  self.onResolvedCallbacks = [];
  // 失败态的处理函数集
  self.onRejectedCallbacks = [];

  // 成功态的处理函数
  function resolve(value) {
    if (self.status === 'pending') {
      self.status = 'fulfilled';
      self.value = value;
      // 依次执行成功回调函数
      self.onResolvedCallbacks.forEach(function(callback){
        callback(self.value);
      });
    }
  }

  // 失败态的处理函数
  function reject(reason) {
    if (self.status === 'pending') {
      self.status = 'rejected';
      self.reason = reason;
      // 依次执行失败回调函数
      self.onRejectedCallbacks.forEach(function(callback){
        callback(self.reason);
      });
    }
  }

  try {
    // 执行executor并传入相应的参数
    executor(resolve, reject);
  } catch (e) {
    // 发生异常时执行失败逻辑
    reject(e);
  }
}

// 实现 then 方法
MyPromise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;

  if (self.status === 'fulfilled') {
    onFulfilled(self.value);
  }

  if (self.status === 'rejected') {
    onRejected(self.reason);
  }

  if (self.status === 'pending') {
    // 如果状态仍然是 pending,我们需要在 resolve 或 reject 被调用时执行对应的处理函数
    self.onResolvedCallbacks.push(onFulfilled);
    self.onRejectedCallbacks.push(onRejected);
  }
};

// 使用手写的 MyPromise
var promise = new MyPromise(function(resolve, reject){
  setTimeout(function(){
    resolve('成功');
    // reject('失败');
  }, 1000);
});

promise.then(function(value){
  console.log(value); // 成功
}, function(reason){
  console.log(reason); // 失败
});

这个手写的 MyPromise 实现了 Promise 的基本行为:

  • 通过 new MyPromise(executor) 创建一个新的 Promise 实例。
  • executor 函数在实例创建时立即执行,并接收两个参数 resolvereject
  • resolve 函数用于将 Promise 状态从 pending 变为 fulfilled,并传入成功值。
  • reject 函数用于将 Promise 状态从 pending 变为 rejected,并传入失败原因。
  • then 方法用于注册成功态和失败态的处理函数,并返回一个新的 Promise 实例。

请注意,这个示例是一个简化版的 Promise,它没有实现链式调用、错误捕获、状态的不可逆转等高级特性。在实际开发中,建议使用内置的 Promise 对象。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。