一步一步手写promise[一]

深藏阁楼爱情的钟 2022-02-17 06:43 396阅读 0赞

开始之前，假设你对promise有个大致的了解，或者快速读一下[Promise A+ 规范][Promise A_],过一下即可，对promise熟练使用，那直接跳过吧。可以边实现，边阅读就行。 不保证实现全部遵循这个规范，但是大致流程肯定要按照这个规范来。

我们看一个基础的原生promise

var p1 = new Promise((resolve, reject) => { })
       var p2 = new Promise((resolve , reject) => {  resolve(1) })
       var p3 = new Promise((resolve, reject) => {  reject(2) })
       console.log(p1,  p2,  p3)

promise 有 `pending` `rejected` `resolved` 3个状态。

promise的状态必须再调用resolve函数之后才变为`resolved`，必须调用了传入的reject函数才能变为`rejected`

并且状态不可逆并且只能由`pending` —> `rejected` 或者 `pending`—>`resolved`。

开始撸代码：

function Promise1(executor) { 
      this.status = "pending" // resolved rejected pending
    
      // 这里的 executor 里面的两个参数只是外界的构造函数的参数的函数的形式参数
      // 比如我们这样写 new Promise((resolve, reject) => { console.log('111') })
      // 下面的resolve实际上是在promise内部实现的函数，我们在这里完全可以改为resolve1 reject1
      // 这样命名是为了将形式参数，与实际函数内部的实现分开，其实你完全可以写成一样的，但是那样只会让人头大
      executor(resolve1, reject1)
    
      // resolve之后，状态应该用 pending 到 resolved
      function resolve1() { 
        if (this.status === 'pending') { 
          this.status = 'resolved'
        }
      }
      function reject1() { 
        if (this.status === 'pending') { 
          this.status = 'rejected'
        }
      }
    }

到这里我们有一个基础的形式了，于是乎我们这样调用：

var p1 = new Promise1((resolve, reject) => { 
      resolve(1)
    })
    console.log(p1) // oops，status没有变化，发现问题了吗？

是的，resolve1函数和reject1函数里面this对象并不是Promise1实例，错了几次这，这个错误专门记下来 ( ╯□╰ )，当然你可以使用ES6语法或者用临时变量来避免类似错误，我们直接修改成箭头函数吧：

function Promise2(executor) { 
      this.status = 'pending'
      var resolve1 = () => { 
        if (this.status === 'pending') { 
          this.status = 'resolved'
        }
      }
      var reject1 = () => { 
        if (this.status === 'pending') { 
          this.status = 'rejected'
        }
      }
      executor(resolve1, reject1) // 形式参数
    }
    
    var p2 = new Promise2((resolve, reject) => { 
      resolve(1)
    })
    console.log(p2) // 这哈就对了

--------------------

我们再加一个功能，因为我们一般resolve(),reject()会传递值和错误信息给then的回调。是谁去调用then呢，就是当下的promise；

then方法接收一个两个参数，一个onFulfilled函数和onRejected函数，如果promise从pending->resolved时候resolve(xx)传递了一个值，那么then方法的第一个函数能够获取到，同理reject(yyy)传递的yyy那么then方法的第二个函数也能获取到，如下面那样。

var p1 = new Promise((resolve, reject) => { 
    	resolve(1)
    })
    p1.then((val)=> { console.log(val)})
    
    var p2 = new Promise((resolve, reject) => { 
    	reject(new Error("something wrong"))
    })
    p2.then(()=>{ }, (err)=>{ console.error(err)})

那么我们给构造函数增加一个value 和error值，确保实例能够获取到这两个值。

function Promise3(executor) { 
    	this.status = 'pending'
    	this.error = null
    	this.value = null
    	
    	const resolve1 = (resolveValue) =>{ 
    		this.value = resolveValue
    		if (this.status === 'pending'){ 
    			this.status = 'resolved'
    		}
    	}
    	const reject1 = (rejectError) => { 
    		this.error = rejectError
    		if (this.status === 'pending') { 
    			this.status = 'rejected'
    		}
    	}
    
    	executor(resolve1, reject1)
    }
    
    // onFulfilled 为第reolve之后的回调
    Promise3.prototype.then = function(onFulfilled, onRejected) { 
    	const  {  error , value  }  = this
        // 若是同步
    	// 这里要做一个判断 如果是resolved才去调用onFulfilled， 如果是rejected去调用onRejected
    	if ( this.status === 'resolved' ) { 
    		onFulfilled(value)
    	}
    	if ( this.status === 'rejected' ) { 
    		onRejected(error)
    	}
    
    }

到这一步就完成了，我们实验一下

var p3 = new Promise3((resolve, reject) => { 
      resolve(1)
    })
    console.log(p3, p3.status)
    
    p3.then((val) => console.log(val))
    
    p3.then((val) => console.log(val, "val22"))

达到了我们预期的效果，我们已经实现了这些功能， 构造一个Promise对象 p， 同步或者异步将p的状态从 `pending` 到 `resolved` /`rejected`。 并且同步执行resolve或者reject函数，能够在then方法里面正确处理状态变化结果的函数，也能够接收到参数。

--------------------

但是问题来了。。。我们是立即resolve，将promise的状态从pending修改为resolved，但是若是异步的该怎么做呢？  
也就是我们必须要保证异步的resolve执行之后，状态才能变为`resolved`，才能执行then里面的第一个函数。

要实现这样的效果：

var p3 = new Promise((resolve, reject) => { 
    	setTimeout(resolve, 200)
    }).then(()=>{ 
    	console.log("2s 之后 打印这个信息。。。。")
    })

resolve1 和 reject1也可以命名成resolveInner/rejectInner 或者 \_reslove / \_reject。。只是为了区分实际的参数和形式参数。不想把人绕进去

我们现在的代码是达不到的。。。怎么做呢。。下篇文章见。。

[Promise A_]: https://promisesaplus.com/