作者
前言
前一阵子记录了 promise 的一些常规用法，这篇文章再深入一个层次，来分析分析 promise 的这种规则机制是如何实现的。ps: 本文适合已经对 promise 的用法有所了解的人阅读, 如果对其用法还不是太了解，可以移步我的上一篇 博文 。
本文的 promise 源码是按照 Promise/A+规范 来编写的（不想看英文版的移步 Promise/A+规范中文翻译 ）
引子
为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。
考虑下面一种获取用户 id 的请求处理
getUserId().then(function(id) {
//一些处理
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//例 1
function getUserId() {
return new Promise(function(resolve) {
//异步请求
http.get(url, function(results) {
resolve(results.id)
})
})
}
getUserId().then(function(id) {
//一些处理
})
|
getUserId 方法返回一个 promise，可以通过它的 then 方法注册 (注意 注册 这个词) 在 promise 异步操作成功时执行的回调。这种执行方式，使得异步调用变得十分顺手。
原理剖析
那么类似这种功能的 Promise 怎么实现呢？其实按照上面一句话，实现一个最基础的雏形还是很 easy 的。
极简 promise 雏形
this.then = function (onFulfilled) {
callbacks.push(onFulfilled);
};
function resolve(value) {
callbacks.forEach(function (callback) {
callback(value);
});
}
fn(resolve);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function Promise(fn) {
var value = null,
callbacks = []; //callbacks 为数组，因为可能同时有很多个回调
this.then = function (onFulfilled) {
callbacks.push(onFulfilled);
};
function resolve(value) {
callbacks.forEach(function (callback) {
callback(value);
});
}
fn(resolve);
}
|
上述代码很简单，大致的逻辑是这样的：
- 调用
then方法，将想要在Promise异步操作成功时执行的回调放入callbacks队列，其实也就是注册回调函数，可以向观察者模式方向思考； - 创建
Promise实例时传入的函数会被赋予一个函数类型的参数，即resolve，它接收一个参数 value，代表异步操作返回的结果，当一步操作执行成功后，用户会调用resolve方法，这时候其实真正执行的操作是将callbacks队列中的回调一一执行；
可以结合 例 1 中的代码来看，首先 new Promise 时，传给 promise 的函数发送异步请求，接着调用 promise 对象的 then 属性，注册请求成功的回调函数，然后当异步请求发送成功时，调用 resolve(results.id) 方法, 该方法执行 then 方法注册的回调数组。
相信仔细的人应该可以看出来，then 方法应该能够链式调用，但是上面的最基础简单的版本显然无法支持链式调用。想让 then 方法支持链式调用，其实也是很简单的：
|
1
2
3
4
|
this.then = function (onFulfilled) {
callbacks.push(onFulfilled);
return this;
};
|
see? 只要简单一句话就可以实现类似下面的链式调用：
|
1
2
3
4
5
6
|
// 例 2
getUserId().then(function (id) {
// 一些处理
}).then(function (id) {
// 一些处理
});
|
加入延时机制
细心的同学应该发现，上述代码可能还存在一个问题：如果在 then 方法注册回调之前，resolve 函数就执行了，怎么办？比如 promise 内部的函数是同步函数：
|
1
2
3
4
5
6
7
8
9
|
// 例 3
function getUserId() {
return new Promise(function (resolve) {
resolve(9876);
});
}
getUserId().then(function (id) {
// 一些处理
});
|
这显然是不允许的，Promises/A+ 规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序。因此我们要加入一些处理，保证在 resolve 执行之前，then 方法已经注册完所有的回调。我们可以这样改造下 resolve 函数:
|
1
2
3
4
5
6
7
|
function resolve(value) {
setTimeout(function() {
callbacks.forEach(function (callback) {
callback(value);
});
}, 0)
}
|
上述代码的思路也很简单，就是通过 setTimeout 机制，将 resolve 中执行回调的逻辑放置到 JS 任务队列末尾，以保证在 resolve 执行时，then 方法的回调函数已经注册完成.
但是，这样好像还存在一个问题，可以细想一下：如果 Promise 异步操作已经成功，这时，在异步操作成功之前注册的回调都会执行，但是在 Promise 异步操作成功这之后调用的 then 注册的回调就再也不会执行了，这显然不是我们想要的。
加入状态
恩，为了解决上一节抛出的问题，我们必须加入状态机制，也就是大家熟知的 pending、fulfilled、rejected。
Promises/A+ 规范中的 2.1Promise States 中明确规定了，pending 可以转化为 fulfilled 或 rejected 并且只能转化一次，也就是说如果 pending 转化到 fulfilled 状态，那么就不能再转化到 rejected。并且 fulfilled 和 rejected 状态只能由 pending 转化而来，两者之间不能互相转换。一图胜千言：
改进后的代码是这样的：
this.then = function (onFulfilled) {
if (state === ‘pending’) {
callbacks.push(onFulfilled);
return this;
}
onFulfilled(value);
return this;
};
function resolve(newValue) {
value = newValue;
state = ‘fulfilled’;
setTimeout(function () {
callbacks.forEach(function (callback) {
callback(value);
});
}, 0);
}
fn(resolve);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
function Promise(fn) {
var state = ‘pending’,
value = null,
callbacks = [];
this.then = function (onFulfilled) {
if (state === ‘pending’) {
callbacks.push(onFulfilled);
return this;
}
onFulfilled(value);
return this;
};
function resolve(newValue) {
value = newValue;
state = ‘fulfilled’;
setTimeout(function () {
callbacks.forEach(function (callback) {
callback(value);
});
}, 0);
}
fn(resolve);
}
|
上述代码的思路是这样的：resolve 执行时，会将状态设置为 fulfilled，在此之后调用 then 添加的新回调，都会立即执行。
这里没有任何地方将 state 设为 rejected，为了让大家聚焦在核心代码上，这个问题后面会有一小节专门加入。
链式 Promise
那么这里问题又来了，如果用户再 then 函数里面注册的仍然是一个 Promise，该如何解决？比如下面的 例 4：
function getUserJobById(id) {
return new Promise(function (resolve) {
http.get(baseUrl + id, function(job) {
resolve(job);
});
});
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 例 4
getUserId()
.then(getUserJobById)
.then(function (job) {
// 对 job 的处理
});
function getUserJobById(id) {
return new Promise(function (resolve) {
http.get(baseUrl + id, function(job) {
resolve(job);
});
});
}
|
这种场景相信用过 promise 的人都知道会有很多，那么类似这种就是所谓的链式 Promise。
链式 Promise 是指在当前 promise 达到 fulfilled 状态后，即开始进行下一个 promise（后邻 promise）。那么我们如何衔接当前 promise 和后邻 promise 呢？（这是这里的难点）。
其实也不是辣么难，只要在 then 方法里面 return 一个 promise 就好啦。Promises/A+ 规范中的 2.2.7 就是这么说哒 (微笑脸)~
下面来看看这段暗藏玄机的 then 方法和 resolve 方法改造代码：
this.then = function (onFulfilled) {
return new Promise(function (resolve) {
handle({
onFulfilled: onFulfilled || null,
resolve: resolve
});
});
};
function handle(callback) {
if (state === ‘pending’) {
callbacks.push(callback);
return;
}
//如果 then 中没有传递任何东西
if(!callback.onResolved) {
callback.resolve(value);
return;
}
var ret = callback.onFulfilled(value);
callback.resolve(ret);
}
function resolve(newValue) {
if (newValue && (typeof newValue === ‘object’ || typeof newValue === ‘function’)) {
var then = newValue.then;
if (typeof then === ‘function’) {
then.call(newValue, resolve);
return;
}
}
state = ‘fulfilled’;
value = newValue;
setTimeout(function () {
callbacks.forEach(function (callback) {
handle(callback);
});
}, 0);
}
fn(resolve);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
function Promise(fn) {
var state = ‘pending’,
value = null,
callbacks = [];
this.then = function (onFulfilled) {
return new Promise(function (resolve) {
handle({
onFulfilled: onFulfilled || null,
resolve: resolve
});
});
};
function handle(callback) {
if (state === ‘pending’) {
callbacks.push(callback);
return;
}
//如果 then 中没有传递任何东西
if(!callback.onResolved) {
callback.resolve(value);
return;
}
var ret = callback.onFulfilled(value);
callback.resolve(ret);
}
function resolve(newValue) {
if (newValue && (typeof newValue === ‘object’ || typeof newValue === ‘function’)) {
var then = newValue.then;
if (typeof then === ‘function’) {
then.call(newValue, resolve);
return;
}
}
state = ‘fulfilled’;
value = newValue;
setTimeout(function () {
callbacks.forEach(function (callback) {
handle(callback);
});
}, 0);
}
fn(resolve);
}
|
我们结合 例 4 的代码，分析下上面的代码逻辑，为了方便阅读，我把 例 4 的代码贴在这里：
function getUserJobById(id) {
return new Promise(function (resolve) {
http.get(baseUrl + id, function(job) {
resolve(job);
});
});
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 例 4
getUserId()
.then(getUserJobById)
.then(function (job) {
// 对 job 的处理
});
function getUserJobById(id) {
return new Promise(function (resolve) {
http.get(baseUrl + id, function(job) {
resolve(job);
});
});
}
|
then方法中，创建并返回了新的Promise实例，这是串行Promise的基础，并且支持链式调用。handle方法是promise内部的方法。then方法传入的形参onFulfilled以及创建新Promise实例时传入的resolve均被push到当前promise的callbacks队列中，这是衔接当前promise和后邻promise的关键所在（这里一定要好好的分析下 handle 的作用）。getUserId生成的promise（简称getUserId promise）异步操作成功，执行其内部方法resolve，传入的参数正是异步操作的结果id- 调用
handle方法处理callbacks队列中的回调：getUserJobById方法，生成新的promise（getUserJobById promise） - 执行之前由
getUserId promise的then方法生成的新promise(称为bridge promise) 的resolve方法，传入参数为getUserJobById promise。这种情况下，会将该resolve方法传入getUserJobById promise的then方法中，并直接返回。 - 在
getUserJobById promise异步操作成功时，执行其callbacks中的回调：getUserId bridge promise中的resolve方法 - 最后执行
getUserId bridge promise的后邻promise的callbacks中的回调。
更直白的可以看下面的图，一图胜千言（都是根据自己的理解画出来的，如有不对欢迎指正）：
失败处理
在异步操作失败时，标记其状态为 rejected，并执行注册的失败回调:
getUserId().then(function(id) {
//一些处理
}, function(error) {
console.log(error)
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//例 5
function getUserId() {
return new Promise(function(resolve) {
//异步请求
http.get(url, function(error, results) {
if (error) {
reject(error);
}
resolve(results.id)
})
})
}
getUserId().then(function(id) {
//一些处理
}, function(error) {
console.log(error)
})
|
有了之前处理 fulfilled 状态的经验，支持错误处理变得很容易, 只需要在注册回调、处理状态变更上都要加入新的逻辑：
this.then = function (onFulfilled, onRejected) {
return new Promise(function (resolve, reject) {
handle({
onFulfilled: onFulfilled || null,
onRejected: onRejected || null,
resolve: resolve,
reject: reject
});
});
};
function handle(callback) {
if (state === ‘pending’) {
callbacks.push(callback);
return;
}
var cb = state === ‘fulfilled’ ? callback.onFulfilled : callback.onRejected,
ret;
if (cb === null) {
cb = state === ‘fulfilled’ ? callback.resolve : callback.reject;
cb(value);
return;
}
ret = cb(value);
callback.resolve(ret);
}
function resolve(newValue) {
if (newValue && (typeof newValue === ‘object’ || typeof newValue === ‘function’)) {
var then = newValue.then;
if (typeof then === ‘function’) {
then.call(newValue, resolve, reject);
return;
}
}
state = ‘fulfilled’;
value = newValue;
execute();
}
function reject(reason) {
state = ‘rejected’;
value = reason;
execute();
}
function execute() {
setTimeout(function () {
callbacks.forEach(function (callback) {
handle(callback);
});
}, 0);
}
fn(resolve, reject);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
function Promise(fn) {
var state = ‘pending’,
value = null,
callbacks = [];
this.then = function (onFulfilled, onRejected) {
return new Promise(function (resolve, reject) {
handle({
onFulfilled: onFulfilled || null,
onRejected: onRejected || null,
resolve: resolve,
reject: reject
});
});
};
function handle(callback) {
if (state === ‘pending’) {
callbacks.push(callback);
return;
}
var cb = state === ‘fulfilled’ ? callback.onFulfilled : callback.onRejected,
ret;
if (cb === null) {
cb = state === ‘fulfilled’ ? callback.resolve : callback.reject;
cb(value);
return;
}
ret = cb(value);
callback.resolve(ret);
}
function resolve(newValue) {
if (newValue && (typeof newValue === ‘object’ || typeof newValue === ‘function’)) {
var then = newValue.then;
if (typeof then === ‘function’) {
then.call(newValue, resolve, reject);
return;
}
}
state = ‘fulfilled’;
value = newValue;
execute();
}
function reject(reason) {
state = ‘rejected’;
value = reason;
execute();
}
function execute() {
setTimeout(function () {
callbacks.forEach(function (callback) {
handle(callback);
});
}, 0);
}
fn(resolve, reject);
}
|
上述代码增加了新的 reject 方法，供异步操作失败时调用，同时抽出了 resolve 和 reject 共用的部分，形成 execute 方法。
错误冒泡是上述代码已经支持，且非常实用的一个特性。在 handle 中发现没有指定异步操作失败的回调时，会直接将 bridge promise(then 函数返回的 promise，后同) 设为 rejected 状态，如此达成执行后续失败回调的效果。这有利于简化串行 Promise 的失败处理成本，因为一组异步操作往往会对应一个实际功能，失败处理方法通常是一致的：
|
1
2
3
4
5
6
7
8
9
|
//例 6
getUserId()
.then(getUserJobById)
.then(function (job) {
// 处理 job
}, function (error) {
// getUserId 或者 getUerJobById 时出现的错误
console.log(error);
});
|
异常处理
细心的同学会想到：如果在执行成功回调、失败回调时代码出错怎么办？对于这类异常，可以使用 try-catch 捕获错误，并将 bridge promise 设为 rejected 状态。handle 方法改造如下：
var cb = state === ‘fulfilled’ ? callback.onFulfilled : callback.onRejected,
ret;
if (cb === null) {
cb = state === ‘fulfilled’ ? callback.resolve : callback.reject;
cb(value);
return;
}
try {
ret = cb(value);
callback.resolve(ret);
} catch (e) {
callback.reject(e);
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function handle(callback) {
if (state === ‘pending’) {
callbacks.push(callback);
return;
}
var cb = state === ‘fulfilled’ ? callback.onFulfilled : callback.onRejected,
ret;
if (cb === null) {
cb = state === ‘fulfilled’ ? callback.resolve : callback.reject;
cb(value);
return;
}
try {
ret = cb(value);
callback.resolve(ret);
} catch (e) {
callback.reject(e);
}
}
|
如果在异步操作中，多次执行 resolve 或者 reject 会重复处理后续回调，可以通过内置一个标志位解决。
总结
刚开始看 promise 源码的时候总不能很好的理解 then 和 resolve 函数的运行机理，但是如果你静下心来，反过来根据执行 promise 时的逻辑来推演，就不难理解了。这里一定要注意的点是：promise 里面的 then 函数仅仅是注册了后续需要执行的代码，真正的执行是在 resolve 方法里面执行的，理清了这层，再来分析源码会省力的多。
现在回顾下 Promise 的实现过程，其主要使用了设计模式中的观察者模式：
- 通过 Promise.prototype.then 和 Promise.prototype.catch 方法将观察者方法注册到被观察者 Promise 对象中，同时返回一个新的 Promise 对象，以便可以链式调用。
- 被观察者管理内部 pending、fulfilled 和 rejected 的状态转变，同时通过构造函数中传递的 resolve 和 reject 方法以主动触发状态转变和通知观察者。
参考文献
深入理解 Promise
JavaScript Promises … In Wicked Detail
The post 30 分钟，让你彻底明白 Promise 原理 appeared first on Linuxeden开源社区.
http://ift.tt/2rt3Rff
没有评论:
发表评论