手写promise以及 .then方法

promise已经是见怪不怪了，那么你真的了解promise吗？面试过程当中经常会要求手写一个promise类，那么今天我们就来盘一盘。

首先三种状态state，pending，fullfilled，rejected；

其次返回值 result，以及resolve，reject对应的成功和失败的回调。

exexutor  执行器函数，会在new promise的时候调用resolve或者reject方法

在其内部需要修改this指向，如果不修改取到的this值是一个undefined，这里后续需要执行resolve以及reject是传进来的，所以没有this指向因此值为undefined

class myPromise{
    constructor(executor){ 
        this.state = 'pending' // 初始化状态
        this.result = null     // 初始化返回值
        // 修改this指向
        this.resolve = this.resolve.bind(this)
        this.reject= this.reject.bind(this)
        executor(this.resolve, this.reject) // 立即执行传进来的函数
    }
    resolve(val){// 返回值需要接受一个值
        if(this.state !== 'pending') return // 状态一旦改变便不能修改
        this.state = 'fullfilled'
        this.result = val
    }
    reject(val){// 返回值需要接受一个值
        if(this.state !== 'pending') return // 状态一旦改变便不能修改
        this.state = 'rejected'
        this.result = val
    }
}

但是这样就会显得constructor当中的内容比较冗余，可能你目前还不会觉得，但是还是养成良好习惯，所以对他进行一个简单的封装操作如下

class myPromise{
    constructor(extcutor){
        this.initVal()
        this.initBind()
        extcutor(this.resolve, this.reject)
    }
    initVal(){     // 初始化状态以及返回值
        this.state = 'pending'
        this.result = null 
    }
    initBind(){     //修改this指向
        this.resolve = this.resolve.bind(this)
        this.reject= this.reject.bind(this)
    }
    resolve(val){    // 返回值需要接受一个值
        if(this.state !== 'pending') return // 状态一旦改变便不能修改
        this.state = 'fullfilled'
        this.result = val
    }
    reject(val){    // 返回值需要接受一个值
        if(this.state !== 'pending') return // 状态一旦改变便不能修改
        this.state = 'rejected'
        this.result = val
    }
}

此时我们的一个promise对象就已经封装完成了，但是简单的实现到这里就结束了，来看一下效果

下一步我们开始封装.then方法。

一样的 首先分析 then方法是所有的promise都可以调用的所以肯定是在prototype上面

myPromise.prototype.then = function (onFullfilled, onRejected) {
    onFullfilled = typeof onFullfilled === 'function' ? onFullfilled : (val) => val
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) => {
        throw reason
    }
    if(this.state === "fullfilled") onFullfilled(this.result)
    else if (this.state === "rejected") onRejected(this.result)
}

判断是否函数，如果非函数就设置为一个函数，并且返回值就是当前的this.result，this指向当前的myPromsie对象，但是此时他是不完美的，我们都知道then方法是可以链式调用的，但是此时我们并没有任何的返回值，所以下一个.then并没有接收到任何的东西。所以需要在尾部返回当前对象

myPromise.prototype.then = function (onFullfilled, onRejected) {
    //  ...省略上面代码
    return this    
}

然后我们发现我们实现了，但是观察真正的promise对象后发现，只有第一个返回值不为undefined

 所以此时还要在补上一点，完整如下

myPromise.prototype.then = function (onFullfilled, onRejectd) {
  onFullfilled =
    typeof onFullfilled === "function" ? onFullfilled : (val) => val;
  onRejectd =
    typeof onRejectd === "function"
      ? onRejectd
      : (reason) => {
          throw reason;
        };

  if (this.state === "fullfilled") {
    onFullfilled(this.result);
  } else if (this.state === "rejectd") {
    onRejectd(this.result);
  }
  this.result = undefined; // 把值交出去之后，将当前对象的promise置为undefined
  return this;
};