基于vue 手写一个promise

Posted 2023-03-15 尔嵘

代码如下：

class VuePromise 
  constructor(executor) 
    this.status = 'pending'; // 初始状态为pending
    this.value = undefined; // 成功结果
    this.reason = undefined; // 失败原因

    const resolve = value => 
      if (this.status === 'pending') 
        this.status = 'fulfilled';
        this.value = value;
      
    ;

    const reject = reason => 
      if (this.status === 'pending') 
        this.status = 'rejected';
        this.reason = reason;
      
    ;

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

  then(onFulfilled, onRejected) 
    if (this.status === 'fulfilled') 
      return new VuePromise((resolve, reject)
      
      
      
class VuePromise 
  constructor(executor) 
    this.status = 'pending'; // 状态初始化为 pending
    this.value = undefined; // 成功时返回的值
    this.reason = undefined; // 失败时的原因
    this.onFulfilledCallbacks = []; // 存储成功时的回调函数
    this.onRejectedCallbacks = []; // 存储失败时的回调函数

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

    const reject = (reason) => 
      if (this.status === 'pending') 
        this.status = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
      
    ;

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

  then(onFulfilled, onRejected) 
    // 解决 onFulfilled 和 onRejected 不传值的问题
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) =>  throw reason ;

    const promise2 = new VuePromise((resolve, reject) => 
      if (this.status === 'fulfilled') 
        setTimeout(() => 
          try 
            const x = onFulfilled(this.value);
            this._handleResult(x, resolve, reject);
           catch (error) 
            reject(error);
          
        , 0);
       else if (this.status === 'rejected') 
        setTimeout(() => 
          try 
            const x = onRejected(this.reason);
            this._handleResult(x, resolve, reject);
           catch (error) 
            reject(error);
          
        , 0);
       else 
        this.onFulfilledCallbacks.push((value) => 
          setTimeout(() => 
            try 
              const x = onFulfilled(value);
              this._handleResult(x, resolve, reject);
             catch (error) 
              reject(error);
            
          , 0);
        );

        this.onRejectedCallbacks.push((reason) => 
          setTimeout(() => 
            try 
              const x = onRejected(reason);
              this._handleResult(x, resolve, reject);
             catch (error) 
              reject(error);
            
          , 0);
        );
      
    );

    return promise2;
  

  catch(onRejected) 
    return this.then(null, onRejected);
  

  _handleResult(x, resolve, reject) 
    if (x instanceof VuePromise) 
      x.then(resolve, reject);
     else 
      resolve(x);
    
  

  static resolve(value) 
    return new VuePromise((resolve) => 
      resolve(value);
    );
  

  static reject(reason) 
    return new VuePromise((_, reject) => 
      reject(reason);
    );
  

  static all(promises) 
    return new VuePromise((resolve, reject) => 
      const results = [];
      let count = promises.length;

      for (let i = 0; i < promises.length; i++) 
        promises[i].then((result) => 
          results[i] = result;
          count--;

          if (count === 0) 
            resolve(results);
          
        ).catch(reject);
      
    );
  

  static race(promises) 
    return new VuePromise((resolve, reject) => 
      promises.forEach((promise) => 
        promise.then(resolve).catch(reject);
      );
    );