还在纠结面试不会写Promise吗?一张图让你彻底弄懂...

lxf2023-04-07 07:11:02

这个Promise类的实现是一个基础版本,它没有考虑到一些复杂的情况,比如异步操作的并发、链式调用等。但是,它可以帮助我们更好地理解Promise的基本原理和实现方式

还在纠结面试不会写Promise吗?一张图让你彻底弄懂...

这是一个用JavaScript实现的Promise类,它实现了Promise的核心功能:状态管理和回调函数注册。

class Promise {
  // 构造函数,接受一个executor函数作为参数
  constructor(executor) {
    // Promise对象的初始状态为'pending'
    this._status = 'pending';
    // Promise对象的初始值和原因都是undefined
    this._value = undefined;
    this._reason = undefined;
    
    // resolve函数用于履行Promise
    const resolve = value => {
      // 只有在Promise对象的状态为'pending'时才能被履行
      if (this._status === 'pending') {
        // 将Promise对象的状态设置为'fulfilled',并保存结果值
        this._status = 'fulfilled';
        this._value = value;
      }
    }
    
    // reject函数用于拒绝Promise
    const reject = reason => {
      // 只有在Promise对象的状态为'pending'时才能被拒绝
      if (this._status === 'pending') {
        // 将Promise对象的状态设置为'rejected',并保存原因
        this._status = 'rejected';
        this._reason = reason;
      }
    }
    
    try {
      // 执行executor函数,并传入resolve和reject函数作为参数
      executor(resolve, reject);
    } catch (error) {
      // 如果executor函数抛出异常,则将Promise对象拒绝,并传入错误对象作为原因
      reject(error);
    }
  }
  
  // then方法用于注册Promise的回调函数
  then(onFulfilled, onRejected) {
    // 如果Promise对象已经被履行,调用onFulfilled回调函数并传入结果值
    if (this._status === 'fulfilled') {
      onFulfilled(this._value);
    // 如果Promise对象已经被拒绝,调用onRejected回调函数并传入原因
    } else if (this._status === 'rejected') {
      onRejected(this._reason);
    }
  }
}

Promise类是用来处理异步操作的对象,可以让我们更方便地进行异步编程。在构造函数中,我们定义了resolvereject函数,用于履行和拒绝Promise。我们还定义了_status_value_reason三个实例变量,用于保存Promise的状态、结果值和原因。

then方法中,我们通过判断Promise对象的状态来确定调用哪个回调函数,并将结果值或原因作为参数传入回调函数中。这样可以让我们在异步操作完成后得到结果,并进行后续的处理。

const myPromise = new Promise((resolve, reject) => {
  const result = performSomeOperation();
  if (result) {
    resolve(result);
  } else {
    reject(new Error('Operation failed'));
  }
});

myPromise.then(
  (value) => {
    console.log(`Promise fulfilled with value: ${value}`);
  },
  (reason) => {
    console.log(`Promise rejected with reason: ${reason}`);
  }
);

在这个例子中,我们首先创建了一个Promise对象myPromise。我们假设有一个名为performSomeOperation的异步操作。如果这个操作成功完成并返回结果,我们就会调用resolve方法来履行这个Promise,并传递结果值。否则,我们会调用reject方法来拒绝这个Promise,并传递一个错误对象作为原因。

在创建Promise对象后,我们使用then方法来处理Promise的结果。如果Promise成功履行,我们会调用第一个回调函数并传递结果值。如果Promise被拒绝,我们会调用第二个回调函数并传递一个错误对象作为原因。