Promise基础

前言：

ES2015将Promise引入语言规范，包括fetch等在内的API也构建在Promise之上。作为让js摆脱“回调地狱”的重要一环和众多框架中的重要基础设施之一，学习如何自己实现一个Promise插件依然是前端工程师晋级之路上很有意义的练习之一。

Promise规范：

在众多Promise规范中，最著名的就是A+规范：

在此规范中，promise被定义为一个带有then方法的object或function，具有pending（可转换为fulfilled或rejected），fulfilled（不可转换，需带有一个value），rejected（不可转换，需带有一个reason）三种状态。

then方法调用时接受成功和失败的回调：promise.then(onFulfilled, onRejected)。onFulfilled在promise被fulfill时调用一次，并传入value；onRejected在promise被reject时调用一次，传入reason。一个promise的then可以被多次调用，因此调用then需要返回promise。

Promise可以被resolve，resolve的传入值也可以是一个promise（thenable的对象）。正确解析promise链，处理其中的resolve、exception、handler的返回值等等是关键所在。

具体文档可见：https://promisesaplus.com/

自己实现Promise：

mmDeferred（https://github.com/RubyLouvre/mmDeferred）是一个优秀的遵循Promise/A+规范的Deffered库，我们就来仿造它看看如何写一个Deffered库。

Deferred函数：

function Deferred() {

var state = "pending", dirty = false // 定义状态state，dirty

function ok(x) { // 定义转换state为fulfilled的接口，返回传入的x

state = "fulfilled"

return x

}

function ng(e) {

state = "rejected" // 定义转换state为rejected的接口，抛出异常

throw e

}

...

}

接下来我们添加Deferred的返回，它将是一个thenable的对象：

var dfd = {

callback: { // 定义resolve与reject的callback

resolve: ok,

reject: ng,

},

dirty: function() {

return dirty

},

state: function() {

return state

},

promise: {

then: function() { // 定义接口then，接受onFulfilled，onRejected作为参数

return _post.apply(null, arguments)

},

_next: null // 每个thenable通过_next完成promise链的构成

}

}

最后我们将给dfd对象绑定resolve与reject对象并返回：

"resolve,reject".replace(/\w+/g, function(method) {

dfd[method] = function() {

var that = this, args = arguments

// promise链上的第一个回调需要异步触发，但剩余链上的回调需要同步触发

if (that.dirty()) {

_fire.call(that, method, args)

} else {

setTimeout(function() {

_fire.call(that, method, args)

}, 0);

}

}

})

return dfd

这里用到了两个闭包内的函数_post与_fire，我们来看看他们各自做了什么：

function _post() {

var index = -1, fns = arguments;

"resolve,reject".replace(/\w+/g, function(method) {

var fn = fns[++index];

if (typeof fn === "function") {

// promise链的头结点，回调需要异步触发

dirty = true

// 修改dfd的resolve与reject函数，绑定then函数传入的回调

dfd.callback[method] = function() {

try {

var value = fn.apply(this, arguments)

state = "fulfilled"

return value

} catch (err) {

state = "rejected"

return err

}

}

}

})

// 形成promise链

var deferred = dfd.promise._next = Deferred(mixin)

return deferred.promise;

}

function _fire(method, array) {

var next = "resolve", value

// 根据状态触发回调

if (this.state() === "pending") {

var fn = this.callback[method]

try {

value = fn.apply(this, array);

} catch (e) {//处理notify的异常

value = e

}

if (this.state() === "rejected") {

next = "reject"

}

array = [value]

}

// promise链依次触发

var nextDeferred = this.promise._next

if (Deferred.isPromise(value)) {

value._next = nextDeferred

} else {

if (nextDeferred) {

_fire.call(nextDeferred, next, array);

}

}

}

还有isPromise 函数：

Deferred.isPromise = function(obj) {

return !!(obj && typeof obj.then === "function");

};

以上便是简化的Deferred库实现，在原库中还有一些优化，比如Deferred可以接受一个对象，以扩展这个对象为thenable，以及在resolve和reject之外还定义了notify（同时增加notify状态，可以继续转化为fulfilled或者rejected状态）以及ensure（无论状态如何转换都会触发），定义了Deferred.all与Deferred.any等等。