从头开始的 Javascript Promise

Question

我从头开始编写基本 Promise 时遇到错误，并且不知道为什么 this.status 会产生错误

class Promisify {
  constructor(fn) {
    this.status = 0; // 0 = unfulfilled, 1 = resolved, 2 = rejected
    this.result = undefined;
    this.error = undefined;
    this.thenFns = [];
    this.catchFns = [];
    this.finallyFn = undefined;

    try {
      fn(this._resolve, this._reject);
    } catch (e) {
      this._reject(e);
    }
  }


  // public methods
  then(fn) {
    this.thenFns.push(fn);
    this._doThen();
    return this;
  }

  catch(fn) {
    this.catchFns.push(fn);
    this._doCatch();
    return this;
  };
  
  finally(fn) {
    this.finallyFn = fn;
    return this;
  }

  // private methods
  _doThen() {
    if (this.status === 1) {
      while(this.thenFns.length) {
        this.thenFns.shift()(this.result);
      }
    }
  }

  _doCatch() {
    if (this.status === 2) {
      if (this.catchFns.length === 0) {
        console.error('uncaught error')
      }
      while(this.catchFns.length) {
        this.catchFns.shift()(this.error);
      }
    }
  }

  _resolve(r) {
    if(this.status) 
      throw Error('cannot resolve, already handled');
    this.status = 1;
    this.result = r;
    this._doThen();
  }
  
  _reject(e) {
    if (this.status) throw Error('cannot reject, already handled');
    this.status = 2;
    this.error = e;
    this._doCatch();
  }
}

Answer 1

如果你想将你的函数传递给其他人调用

 fn(this._resolve, this._reject);

并且在调用时让 this 指向您的 Promise 对象，您需要显式绑定(bind)它们:

  fn(this._resolve.bind(this), this._reject.bind(this));

class Promisify {
   constructor(fn) {
     this.status = 0; // 0 = unfulfilled, 1 = resolved, 2 = rejected
     this.result = undefined;
     this.error = undefined;
     this.thenFns = [];
     this.catchFns = [];
     this.finallyFn = undefined;
 
     try {
       fn(this._resolve.bind(this), this._reject.bind(this));
     } catch (e) {
       this._reject(e);
     }
   }
 
   // public methods
   then(fn) {
     this.thenFns.push(fn);
     this._doThen();
     return this;
   }
 
   catch(fn) {
     this.catchFns.push(fn);
     this._doCatch();
     return this;
   };
   
   finally(fn) {
     this.finallyFn = fn;
     return this;
   }
 
   // private methods
   _doThen() {
     if (this.status === 1) {
       while(this.thenFns.length) {
         this.thenFns.shift()(this.result);
       }
     }
   }
 
   _doCatch() {
     if (this.status === 2) {
       if (this.catchFns.length === 0) {
         console.error('uncaught error')
       }
       while(this.catchFns.length) {
         this.catchFns.shift()(this.error);
       }
     }
   }
 
   _resolve(r) {
     if(this.status) 
       throw Error('cannot resolve, already handled');
     this.status = 1;
     this.result = r;
     this._doThen();
   }
   
   _reject(e) {
     if (this.status) throw Error('cannot reject, already handled');
     this.status = 2;
     this.error = e;
     this._doCatch();
   }
 }
 

 const demo = new Promisify((resolve, reject) => {
   setTimeout(function() {
     resolve('Howdy!')
   }, 1000);
 });
 
 demo
.then(val => console.log("Demo Value in Then!!", val))
.catch(console.error) //Should throw an error.
.then(val => console.log("Second then!"))
.catch((err) => {
    throw new Error('error', err);
})
.finally(val => console.log("Executed Finally"))