实现一个Promise

实现一个 Promise

对前端感兴趣的小伙伴,可以关注我的 Github

做为一名IT界比较少的物种 “程序媛”,经常会把 “感觉” 挂在嘴边,由于有过设计的背景,童鞋们都会觉得这只是一个女性化艺术化的词汇,emm...... 也有大佬把“感觉” 与 “经验” 划上等号,其实这是很片面的,在我看来“感觉” = “经验” + “创造”,而创造离不开知其然知其所以然,so....要对码代码这件事情有感觉,就要深入底层,多造轮子,慢慢的就爱上啦....

有兴趣可以查看官方实现

Promise 是什么

Promise 主要就是为了解决异步回调的问题。

用 Promise 来处理异步回调使得代码层次清晰,便于理解,且更加容易维护,符合开放封闭原则。

Promise 场景

先宏观感受一下 Promise 的使用

面试题:后端分两次返回数据,第一次返回 ID 数组,第二次根据第一次返回的 ID 去请求数据

const ids = [1, 2, 3, 4, 5]

const data = {

   1: 'data1',

   2: 'data2',

   3: 'data3',

   4: 'data4',

   5: 'data5',

}

resData = (data) => (

   new Promise((resolve, request) => {

       setTimeout(resolve, 1000, data, )

   })

)

resData(ids).then((ids) => {

   ids.forEach((id) => {

       resData(data).then(

           console.log(data[id])

       )

   })

}).catch(e => {

 console.log(e);

})

最终我们写的promise同样可以实现这个功能

实现MyPromise

Promise 有三种状态:

  • Pending: 进行中

  • Resolved: 已成功

  • Rejected: 已失败

先定义三个标识状态的变量:


// 三种状态

const PENDING = 'pending';

const RESOLVED = 'resolved';

const REJECTED = 'rejected';

我们需要两个私有变量:

  • 标识Promise当前的状态:currentState

  • 记录Promise的最终值:value

我们自己不能实现内部属性,JS中私有属性特性(#修饰符现在还是提案)暂时也没有支持,所以暂且用"_"前缀规定私有属性,这样就模拟了Promise 中的两个内部属性。

实现骨架

实现三个静态方法及一个原型方法

  • resolve

  • reject

  • catch

  • then


function MyPromise(fn) {

  let _this = this;

  _this.currentState = PENDING;

  _this.value = undefined;

  // 用于保存 then 中的回调,

  // 只有当 promise 状态为 pending 时,才会缓存,

  // 并且每个实例至多缓存一个

  _this.resolvedCallbacks = [];

  _this.rejectedCallbacks = [];

  _this.resolve = function (value) {

    // ...

  }

  _this.reject = function (reason) {

    // ...

  }

  try {

    fn(_this.resolve, _this.reject)

  } catch(e) {

    _this.reject(e)

  }

}

MyPromise.prototype.execute = function(executor) {

  // ...

}

MyPromise.prototype.then = function(onResolved, onRejected) {

  // ...

}

实现 resolve 和 reject

可以把 Promise 看成一个状态机。初始是 pending 状态,可以通过函数 resolve 和 reject,将状态转变为 resolved 或者 rejected 状态,状态一旦改变就不能再次变化。


// 如果 value 是个Promise,递归执行

    if(value instanceof MyPromise) {

      return value.then(_this.resolve, _this.reject)

    }

    // 异步执行,保证执行顺序

    setTimeout(() => {

      if(_this.currentState === PENDING) {

        _this.currentState = RESOLVED

        _this.value = value

        _this.resolvedCallbacks.forEach(cb => cb())

      }

    })

  _this.reject = function (reason) {

    setTimeout(() => {

      if(_this.currentState === PENDING) {

        _this.currentState = REJECTED

        _this.value = reason

        _this.rejectedCallbacks.forEach(cb => cb())

      }

    })

  }

实现 then

then 方法内部逻辑稍微复杂点,并且有一点一定一定一定要注意到: then 方法中的回调是异步执行的,思考下下段代码:


console.log(1);

new Promise((resolve,reject)=>{

    console.log(2);

    resolve();

})

.then(()=>console.log(3));

console.log(4);

执行结果是什么呢?答案其实是:1 2 4 3。传入 Promise 中的执行函数是立即执行完的啊,为什么不是立即执行 then 中的回调呢?因为 then 中的回调是异步执行,表示该回调是插入事件队列末尾,在当前的同步任务结束之后,下次事件循环开始时执行队列中的任务。

大体实现一下 then 的框架:

onResolvedonRejected 都是可选的参数,即如果类型不是 function ,需要忽略处理,同时也实现了透传。

Promise 的当前状态 Pending 时,缓存实例 (该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态,其他状态是不可以改变的,如果返回的是一个相同实例的话,多个 then 调用就失去意义了);否则异步执行传入的onResolved 或者 onRejected


MyPromise.prototype.then = function(onResolved, onRejected) {

  var self = this

  // then 必须返回一个新的 promise

  var promise2

  // onResolved 和 onRejected 都为可选参数

  // 如果类型不是 function ,需要忽略,同时也实现了透传

  // Promise.resolve(4).then().then(value => console.log(value))

  onResolved = typeof onResolved === 'function' ? onResolved : v => v;

  onRejected = typeof onRejected === 'function' ? onRejected : r => throw r;

  if (self.currentState === RESOLVED) {

    return (promise2 = new MyPromise((resolve, reject) => {

      setTimeout(() => {

        // 异步执行onResolved

        try {

          var x = onResolved(self.value);

          // resolutionProcedure(promise2, x, resolve, reject);

        } catch (reason) {

          reject(reason);

        }

      })

    }))

  }

  if (self.currentState === REJECTED) {

    return (promise2 = new MyPromise((resolve, reject) => {

      setTimeout(() => {

        // 异步执行onRejected

        try {

          var x = onRejected(self.value);

          // resolutionProcedure(promise2, x, resolve, reject);

        } catch (reason) {

          reject(reason);

        }

      })

    }))

  }

  if (self.currentState === REJECTED) {

    return (promise2 = new MyPromise((resolve, reject) => {

        // 缓存实例到 resolvedCallbacks 或者 rejectedCallbacks

        self.resolvedCallbacks.push(function () {

        // 考虑到可能会有报错,所以使用 try/catch 包裹

        try {

          var x = onResolved(self.value);

          // resolutionProcedure(promise2, x, resolve, reject);

        } catch (r) {

          reject(r);

        }

      });

      self.rejectedCallbacks.push(function () {

        try {

          var x = onRejected(self.value);

          // resolutionProcedure(promise2, x, resolve, reject);

        } catch (r) {

          reject(r);

        }

      });

    }))

  }

}

以上就是根据 Promise / A+ 规范来实现的代码,可以通过 promises-aplus-tests 的完整测试

promise 最早是在 commonjs 社区提出来的,当时提出了很多规范。比较接受的是 promise/A 规范。后来人们在这个基础上。提出了 promise/A+规范,也就是实际上的业内推行的规范。ECMAScript 6.0 也是采用的这种规范。

Promise 的缺点

无法取消 Promise,一旦新建它就会立即执行,无法中途取消

如果不设置回调函数,Promise 内部抛出的错误不会反应到外部

当处于 Pending 状态时,无法得知目前进展到哪一个阶段


想找萝卜或者想找坑的童鞋,可以加入我们的“前端内推群”,里面有 BATJ 等大厂的 HR,同时也有精通React、Vue、Node、小程序的大佬。

加小姐姐微信,请她拉你进去。(注明一下你的title哦)

image

推荐阅读更多精彩内容