你也可以2分钟手写promise(一)

75 阅读2分钟

一、Promise是什么?

一个 Promise 是一个代理,它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值:异步方法不会立即返回最终值,而是返回一个 promise,以便在将来的某个时间点提供该值。

一个 Promise 必然处于以下几种状态之一:

  • 待定(pending) :初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled) :意味着操作成功完成。
  • 已拒绝(rejected) :意味着操作失败。

一个待定的 Promise 最终状态可以是已兑现并返回一个值,或者是已拒绝并返回一个原因(错误)。当其中任意一种情况发生时,通过 Promise 的 then 方法串联的处理程序将被调用。如果绑定相应处理程序时 Promise 已经兑现或拒绝,这处理程序将被立即调用,因此在异步操作完成和绑定处理程序之间不存在竞态条件。

如果一个 Promise 已经被兑现或拒绝,即不再处于待定状态,那么则称之为已敲定(settled)

2、实现最基本的Promise

根据Promise的用法来实现一个Promise类,完整代码块

class Promise{
  constructor(executor){
      executor(this.resolve.bind(this))
  }
  then(fn){
    this.callbacks.push(fn)
  }
  resolve(value){
   this.callbacks.forEach((element) => {
     element(value);
   });
  }
}
new Promise((reasolve)=>{
  console.log('promise');
  setTimeout(()=>{
    reasolve(1);
  },1000)
}).then(res=>{
  console.log(res)
})
console.log('先打印');
  1. 实现执行Promise自己的回调,在实例化的constructor里面执行传入的executor方法,并且注意参数resolve指向当前实例的this,如果没有明确的执行上下文,this通常会指向全局对象。但是,如果使用strict modethis的值会是undefined。所以需要改变resolve指向当前的实例
(reasolve)=>{
  console.log('promise');
  setTimeout(()=>{
    reasolve(1);
  },1000)
}

//executor(this.resolve.bind(this))

2. 定义一个callbacks数组用来储存then的回调方法,当调用then方法的时候将会回调函数push进去callbacks数组

  then(fn){
    this.callbacks.push(fn)
  }

3. resolve被调用的时候,取出callbacks里面的方法循环调用

  resolve(value){
    this.callbacks.forEach((element) => {
     element(value);
   });
  }

总结:实现了Promise.then方法,当resolve的时候执行then的回调做到了Promise的等待