Promise 探讨

（给前端大全加星标，提升前端技能）

作者：大转转FE/周浪

一、前言

大家都知道JavaScript一大特点就是单线程，为了不阻塞主线程，有些耗时操作（比如ajax）必须放在任务队列中异步执行。传统的异步编程解决方案之一回调，很容易产生臭名昭著的回调地狱问题。

1. fs.readdir(source, function(err, files) {

2.  if (err) {

3.    console.log('Error finding files: ' + err)

4.  } else {

5.    files.forEach(function(filename, fileIndex) {

6.      console.log(filename)

7.      gm(source + filename).size(function(err, values) {

8.        if (err) {

9.          console.log('Error identifying file size: ' + err)

10.        } else {

11.          console.log(filename + ' : ' + values)

12.          aspect = (values.width / values.height)

13.          widths.forEach(function(width, widthIndex) {

14.            height = Math.round(width / aspect)

15.            console.log('resizing ' + filename + 'to ' + height + 'x' + height)

16.            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {

17.              if (err) console.log('Error writing file: ' + err)

18.            })

19.          }.bind(this))

20.        }

21.      })

22.    })

23.  }

24. })

虽然回调地狱可以通过减少嵌套、模块化等方式来解决，但我们有更好的方案可以采取，那就是 Promise

二、含义

Promise 是一个对象，保存着异步操作的结果，在异步操作结束后，会变更 Promise 的状态，然后调用注册在 then 方法上回调函数。 ES6 原生提供了 Promise 对象，统一用法（具体可参考阮一峰的ES6入门(http://es6.ruanyifeng.com/?search=promise&x=0&y=0#docs/promise#Promise-%E7%9A%84%E5%90%AB%E4%B9%89)）

三、实现

Promise 的使用想必大家都很熟练，可是究其内部原理，在这之前，我一直是一知半解。本着知其然，也要知其所以然的目的，开始对 Promise 的实现产生了兴趣。

众所周知， Promise 是对 Promises/A+ 规范的一种实现，那我们首先得了解规范， 详情请看Promise/A+规范(https://promisesaplus.com/)，个人github上有对应的中文翻译README.md(https://github.com/zhoulang27426405/learn-promise/blob/master/README.md)

promise构造函数

规范没有指明如何书写构造函数，那就参考下 ES6 的构造方式

1. const promise = new Promise(function(resolve, reject) {

2.  // ... some code

3.  if (/* 异步操作成功 */){

4.    resolve(value);

5.  } else {

6.    reject(error);

7.  }

8. });

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject

resolve 函数的作用是将 Promise 对象的状态从 pending 变为 fulfilled ，在异步操作成功时调用，并将异步操作的结果，作为参数传递给注册在 then 方法上的回调函数（then方法的第一个参数）； reject 函数的作用是将 Promise 对象的状态从 pending 变为 rejected ，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递给注册在 then 方法上的回调函数（then方法的第二个参数）

所以我们要实现的 promise (小写以便区分ES6的 Promise )构造函数大体如下：

1. // promise 构造函数

2. function promise(fn) {

3.  let that = this

4.  that.status = 'pending' // 存储promise的state

5.  that.value = '' // 存储promise的value

6.  that.reason = '' // 存储promise的reason

7.  that.onFulfilledCb = [] // 存储then方法中注册的回调函数（第一个参数）

8.  that.onRejectedCb = [] // 存储then方法中注册的回调函数（第二个参数）

9.  // 2.1

10.  function resolve(value) {

11.    // 将promise的状态从pending更改为fulfilled，并且以value为参数依次调用then方法中注册的回调

12.    setTimeout(() => {

13.      if (that.status === 'pending') {

14.        that.status = 'fulfilled'

15.        that.value = value

16.        // 2.2.2、2.2.6

17.        that.onFulfilledCb.map(item => {

18.          item(that.value)

19.        })

20.      }

21.    }, 0)

22.  }

23.  function reject(reason) {

24.    // 将promise的状态从pending更改为rejected，并且以reason为参数依次调用then方法中注册的回调

25.    setTimeout(() => {

26.      if (that.status === 'pending') {

27.        that.status = 'rejected'

28.        that.reason = reason

29.        // 2.2.3、2.2.6

30.        that.onRejectedCb.map(item => {

31.          item(that.reason)

32.        })

33.      }

34.    }, 0)

35.  }

36.  fn(resolve, reject)

37. }

规范2.2.6中明确指明 then 方法可以被同一个 promise 对象调用，所以这里需要用一个数组 onFulfilledCb 来存储then方法中注册的回调

这里我们执行 resolve reject 内部代码使用setTimeout，是为了确保 then 方法上注册的回调能异步执行（规范3.1）

then方法

promise 实例具有 then 方法，也就是说， then 方法是定义在原型对象 promise.prototype 上的。它的作用是为 promise 实例添加状态改变时的回调函数。

规范2.2 promise 必须提供一个 then 方法 promise.then(onFulfilled,onRejected) 规范2.2.7 then 方法必须返回一个新的promise

阅读理解规范2.1和2.2，我们也很容易对then方法进行实现：

1. promise.prototype.then = function(onFulfilled, onRejected) {

2.  let that = this

3.  let promise2

4.  // 2.2.1、2.2.5

5.  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v

6.  onRejected = typeof onRejected === 'function' ? onRejected : r => r

7.  if (that.status === 'pending') {

8.    // 2.2.7

9.    return promise2 = new promise((resolve, reject) => {

10.      that.onFulfilledCb.push(value => {

11.        try {

12.          let x = onFulfilled(value)

13.        } catch(e) {

14.          // 2.2.7.2

15.          reject(e)

16.        }

17.      })

18.      that.onRejectedCb.push(reason => {

19.        try {

20.          let x = onRejected(reason)

21.        } catch(e) {

22.          // 2.2.7.2

23.          reject(e)

24.        }

25.      })

26.    })

27.  }

28. }

重点在于对 onFulfilled 、 onRejected 函数的返回值x如何处理，规范中提到一个概念叫 PromiseResolutionProcedure ，这里我们就叫做Promise解决过程

Promise 解决过程是一个抽象的操作，需要输入一个 promise 和一个值，我们表示为 [[Resolve]](promise,x)，如果 x 有 then 方法且看上去像一个 Promise ，解决程序即尝试使 promise 接受 x 的状态；否则用 x的值来执行 promise

promise解决过程

对照规范2.3，我们再来实现 promise resolution ， promise resolution 针对x的类型做了各种处理：如果 promise 和 x 指向同一对象，以 TypeError 为 reason 拒绝执行 promise、如果 x 为 promise ，则使 promise 接受 x 的状态、如果 x 为对象或者函数，判断 x.then 是否是函数、 如果 x 不为对象或者函数，以 x 为参数执行 promise（resolve和reject参数携带promise2的作用域，方便在x状态变更后去更改promise2的状态）

1. // promise resolution

2. function promiseResolution(promise2, x, resolve, reject) {

3.  let then

4.  let thenCalled = false

5.  // 2.3.1

6.  if (promise2 === x) {

7.    return reject(new TypeError('promise2 === x is not allowed'))

8.  }

9.  // 2.3.2

10.  if (x instanceof promise) {

11.    x.then(resolve, reject)

12.  }

13.  // 2.3.3

14.  if (typeof x === 'object' || typeof x === 'function') {

15.    try {

16.      // 2.3.3.1

17.      then = x.then

18.      if (typeof then === 'function') {

19.        // 2.3.3.2

20.        then.call(x, function resolvePromise(y) {

21.          // 2.3.3.3.3

22.          if (thenCalled) return

23.          thenCalled = true

24.          // 2.3.3.3.1

25.          return promiseResolution(promise2, y, resolve, reject)

26.        }, function rejectPromise(r) {

27.          // 2.3.3.3.3

28.          if (thenCalled) return

29.          thenCalled = true

30.          // 2.3.3.3.2

31.          return reject(r)

32.        })

33.      } else {

34.        // 2.3.3.4

35.        resolve(x)

36.      }

37.    } catch(e) {

38.      // 2.3.3.3.4.1

39.      if (thenCalled) return

40.      thenCalled = true

41.      // 2.3.3.2

42.      reject(e)

43.    }

44.  } else {

45.    // 2.3.4

46.    resolve(x)

47.  }

48. }

完整代码可查看stage-4(https://github.com/zhoulang27426405/learn-promise/blob/master/stage-4/promise-4.js)

思考

以上，基本实现了一个简易版的 promise ，说白了，就是对 Promises/A+ 规范的一个翻译，将规范翻译成代码。因为大家的实现都是基于这个规范，所以不同的 promise 实现之间能够共存(不得不说制定规范的人才是最厉害的)

1. function doSomething() {

2.  return new promise((resolve, reject) => {

3.    setTimeout(() => {

4.      resolve('promise done')

5.    }, 2000)

6.  })

7. }

8. function doSomethingElse() {

9.  return new Promise((resolve, reject) => {

10.    setTimeout(() => {

11.      reject('ES6 promise')

12.    }, 1000)

13.  })

14. }

15. this.promise2 = doSomething().then(doSomethingElse)

16. console.log(this.promise2)

至于 ES6 的 finally 、 all 等常用方法，规范虽然没有制定，但是借助 then 方法，我们实现起来也很方便stage-5(https://github.com/zhoulang27426405/learn-promise/tree/master/stage-5)

ES7 的 Async/Await 也是基于 promise 来实现的，可以理解成 async 函数会隐式地返回一个 Promise ， await 后面的执行代码放到 then 方法中

更深层次的思考，你需要理解规范中每一条制定的意义，比如为什么then方法不像jQuery那样返回this而是要重新返回一个新的promise对象（如果then返回了this，那么promise2就和promise1的状态同步，promise1状态变更后，promise2就没办法接受后面异步操作进行的状态变更）、 promise解决过程 中为什么要规定 promise2 和 x 不能指向同一对象(防止循环引用)

promise的弊端

promise彻底解决了callback hell，但也存在以下一些问题

1. 延时问题(涉及到evnet loop)(http://www.ruanyifeng.com/blog/2014/10/event-loop.html))

2. promise一旦创建，无法取消

3. pending状态的时候，无法得知进展到哪一步（比如接口超时，可以借助race方法）

4. promise会吞掉内部抛出的错误，不会反映到外部。如果最后一个then方法里出现错误，无法发现。（可以采取hack形式，在promise构造函数中判断onRejectedCb的数组长度，如果为0，就是没有注册回调，这个时候就抛出错误，某些库实现done方法，它不会返回一个promise对象，且在done()中未经处理的异常不会被promise实例所捕获）

5. then方法每次调用都会创建一个新的promise对象，一定程度上造成了内存的浪费

总结

支持 promise 的库有很多，现在主流的浏览器也都原生支持 promise 了，而且还有更好用的 Async/Await 。之所以还要花精力去写这篇文章,道理很简单，就是想对规范有一个更深的理解，希望看到这里的同学同样也能有所收获

推荐阅读

（点击标题可跳转阅读）

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

喜欢就点一下「好看」呗~