起因

已经用了好几年的promise了, 趁今天闲得蛋疼,自己倒推下怎么手写.

最近给项目组招聘前端同事,每次问到他们"怎么理解promise",都是清一色的回答....然后我想,如果是我的话?是不是也会这么回答呢???我想还是要把promise当初是怎么设计/怎么实现讲出来比较好吧??总之就是纯纯好奇,想简单倒推下,当初他们是咋设计的...

众所周知, promise是这么用的

//定义函数,返回promise实例
const mockRequest = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1)
    }, 1000)
  })
}

//然后使用
mockRequest().then(res=>{
  console.log(res)
})

那么我们可以粗略的看到,promise实例拥有以下几种方法

• then()
• resolve()
• reject() 这个不在上面的例里,但是一般都会用到

那么我们可以在这个实例里面添加这几个方法

class Promise2 {
  constructor(){}
  then() {}
  resolve() {}
  reject() {}
}

再结合上面promise使用例子的传参

• 在我new Promise()时,在里面传了个函数,因此命名为fn,这里使用type script , 比起js靠猜里面有没有值方便很多.
• 因为是倒退,我可以很清楚函数接受的参数类型,参数数量
• constructor 接受一个fn,fn中有resolve 和 reject两个参数,fn在创建Promise实例中执行

\

constructor(
  //规定fn函数的类型,他接受两个参数
  //resolve:在生成Promise实例中传入的回调函数,接受参数result,然后执行实例中的resolve函数
  //reject同理
    fn: (resolve: (result) => void, reject: (error) => void) => void
  ) {
   fn(
      (result) => this.resolve(result),
      (error) => this.reject(error)
    );
  }

• 规定了resolve函数,那么就要执行resolve函数
• 执行resolve函数,我的理解是,这里的resolve是对异步执行的结果的resolve

resolve(res) {
    this.succeed(res);
  }

因此

class Promise2 {
  fail: null;
  succeed: (res) => {};
  constructor(fn: (res: (a) => void, rej: () => void) => void) {
    fn(
      (a) => this.resolve(a),
      () => this.reject()
    );
  }
  resolve(res) {
    this.succeed(res);
  }
  reject() {}
}

现在完成到一半

前面定义的时候如何执行异步并执行回调,最后下一步定义如何定义执行拿到结果的函数

• 最后定义then()方法

class Promise2 {
  succeed:null;
  constructor(fn: (res: (a) => void, rej: () => void) => void) {
    fn(
      (a) => this.resolve(a),
      () => this.reject()
    );
  }
  then(succeed, fail?) {
    this.succeed = succeed;
  }
  resolve(res) {
    this.succeed(res);
  }
}