ZenOven's Archivers

From zenoven on 2018-02-09 16:48:02

亲手实现一个Promise

为何要手写Promise?直接import不行吗?


身处技术圈,前端技术真的是日新月异,异步的实现方式从callback、到Promise、再到Generator、Async/Await,有了长足的发展,Promise作为发展过程中的一种产物其既是callback的一种改良,也是Generator、Async/Await的基础。

直接import一个Promise类库当然可行(在支持的浏览器中直接使用Promise也未尝不可),但是如果我们能够亲手实现一个Promise,那么我们还能够:

另外有一点需要说明,本文针对的是有一定Promise基础的同学,基础知识不在本文范畴之内,不了解的话请自行Google :)

实现的内容


实现之前我们先来思考下,一个Promise中到底有哪些是必须要实现的?

按照Promise/A+的标准来说,只需要Promise的then方法即可,至于怎么实现、constructor怎么写,完全没有提及。不过虽然看似东西很少,但是实质上还是有蛮多东西要处理的。

首先,constructor是必须的,在这里我们需要做一些初始化的动作:

其次,then方法由于是每个实例上都有,所以会挂在prototype上面,then方法中我们需要做的事情有

然后,我们还需要一个resolvePromise函数,这个函数根据标准而来(其实不管怎样,Promise的实现中都是少不了这样的处理过程)

至于原型上的catch方法以及race、all等静态方法,暂时不处理,而且这些在我们实现了Promise的基础代码后都是很容易的事情,暂时不做处理。

Constructor



[code lang="JS"]
function Promise(resolver) {

var self = this
self.status = 'pending'
self.fulfilledCallbacks = []
self.rejectedCallbacks = []
self.data = null

if(typeof resolver !== 'function') {
throw new TypeError('Promise resolver ' + resolver + 'is not a function')
}

function onFulfilled(data) {
setTimeout(function () {
if(self.status !== 'pending') return
self.status = 'fulfilled'
self.data = data
var currentCallback

for(var i = 0; i < self.fulfilledCallbacks.length; i++) {
currentCallback = self.fulfilledCallbacks[i]
typeof currentCallback === 'function' && currentCallback(self.data)
}
})
}

function onRejected(reason) {
setTimeout(function () {
if(self.status !== 'pending') return
self.status = 'rejected'
self.data = reason
var currentCallback
for(var i = 0; i < self.rejectedCallbacks.length; i++) {
currentCallback = self.rejectedCallbacks[i]
typeof currentCallback === 'function' && currentCallback(self.data)
}
})
}

try {
resolver(onFulfilled, onRejected)
}catch (e){
onRejected(e)
}

}
[/code]

可以看到,在构造函数中最上面是对初始状态的处理。

[code lang="JS"]
self.status = 'pending' // 初始化时必定是pengding状态,
self.fulfilledCallbacks = [] // fulfilled后执行的回调
self.rejectedCallbacks = [] // rejected后执行的回调
self.data = null // 初始化时Promise内部的数据
[/code]

接着对resolver做了判断,

[code lang="JS"]
if(typeof resolver !== 'function') {
throw new TypeError('Promise resolver ' + resolver + 'is not a function')
}
[/code]

因为对于一个Promise来说,传入的resolver不是function就没有意义了,比如

[code lang="JS"]var p = new Promise(100) //那么这里传入100的时候,到底想干嘛?[/code]

然后是onFulfilled和onRejected这两个函数的定义,即我们传递给一个Promise实例里的resolve和reject两个参数

[code lang="JS"]
var p = new Promise( (resolve, reject) => {
resolve() // resolve即onFulfilled、reject即onRejected
})
[/code]


[code lang="JS"]
function onFulfilled(data) {
setTimeout(function () {
if(self.status !== 'pending') return
self.status = 'fulfilled'
self.data = data
var currentCallback

for(var i = 0; i < self.fulfilledCallbacks.length; i++) {
currentCallback = self.fulfilledCallbacks[i]
typeof currentCallback === 'function' && currentCallback(self.data)
}
})
}
[/code]

在onFulfilled中首先我们看到的是一个setTimeout,这样做的目的是为了确保onFulfilled是异步执行的,至于为何要异步执行,目前还没有搞懂,个人感觉是非必须的,但是如果设置为同步的会导致测试无法通过,在查看bluebird的源代码时发现这部分根据data做了判断,如果非Promise会是同步,而是Promise的话会异步执行,这个坑先留着,待后面解决。

setTimeout内先对状态进行判断,如果其已经是fulfilled或rejected我们直接返回,接着就是一个for循环执行回调。

onRejected和onFulfilled大同小异,不多赘述。

[code lang="JS"]
try {
resolver(onFulfilled, onRejected)
}catch (e){
onRejected(e)
}
[/code]

最后我们直接在一个try/catch中执行传入的resolver,以便对执行resolver时候的错误进行处理。

Promise.prototype.then



[code lang="JS"]
Promise.prototype.then = function (onFulfilled, onRejected) {
var self = this
var p
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(val){return val}
onRejected = typeof onRejected === 'function' ? onRejected : function(reason){throw reason}

if(self.status !== 'pending') {
return p = new Promise(function (resolve, reject) {
setTimeout(function () {
var functionToCall = self.status === 'fulfilled' ? onFulfilled : onRejected
var result
try {
result = functionToCall(self.data)
resolvePromise(p, result, resolve, reject)
} catch (e) {
reject(e)
}
})
})
} else {
return p = new Promise(function (resolve, reject) {
self.fulfilledCallbacks.push(function(){
try {
var result = onFulfilled(self.data)
// 如果上个then的返回值是个Promise实例 或者Promise resolver里面resolve的结果是个Promise实例
resolvePromise(p, result, resolve, reject)
} catch (e) {
reject(e)
}
})
self.rejectedCallbacks.push(function(){
try {
var result = onRejected(self.data)
// 如果上个then的返回值是个Promise实例 或者Promise resolver里面resolve的结果是个Promise实例
resolvePromise(p, result, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
}
[/code]

根据标准Promise.prototype.then的返回值是一个新的Promise,所以我们可以看到2处类似这样的代码

[code lang="JS"]
return p = new Promise(function (resolve, reject) {
...
})
[/code]

这2处就是根据当前Promise实例(self)的状态来做不同的处理

首先看非pending状态

接着再看pending,由于self还是pending状态,那么就等到self resolve或者是reject的时候再来处理,即将相应的代码放入fulfilledCallbacks/rejectedCallbacks中即可

resolvePromise



[code lang="JS"]
function resolvePromise(promise, x, resolve, reject){
var then
var thenCalled

if(promise === x) reject(new TypeError('Chaining cycle detected for promise!'))

if(x instanceof Promise) {
if(x.status === 'pending') {
x.then(function (value) {
resolvePromise(promise, value, resolve, reject)
}, reject)
}else{
x.then(resolve,reject)
}

} else if(x !== null && (typeof x === 'function' || typeof x === 'object') ){

try{
then = x.then
if(typeof then === 'function') {
then.call(x, function(y){
if(thenCalled) return
thenCalled = true
resolvePromise(promise, y, resolve, reject)
}, function(r){
if(thenCalled) return
thenCalled = true
return reject(r)
})
} else {
resolve(x)
}
}catch(e){
if(thenCalled) return
thenCalled = true
return reject(e)
}

}else{
resolve(x)
}

}
[/code]

刚开始的时候不是很立即为什么会有这么一个过程,想着直接根据then中onFulfilled返回的值(result)做判断,然后返回不同的Promise即可,后来发现result有各种不同的情况,而且不止一个地方需要用到,那么将其抽取出来是就合情合理了。

resolvePromise中主要的处理就是根据传入的x来决定promise(输入参数中的promise)的状态,其中最主要的2块

其他代码更多的是边界值的判断,这里就不做赘述了。

总结


之前面试的时候被问到怎么实现一个Promise,一脸懵逼,这个问题压根没想过,然后临阵发挥的时候一直纠结于resolve在哪里,现在想想真是傻,为何为停在这里。。。🙃

参考资料

查看完整版本: 亲手实现一个Promise

Tags: JS, promise, 实现


©ZenOven