上一篇文章 24.Promises/A+ 规范 介绍了Promises/A+ 规范，我们来手动实现一个符合 Promises/A+ 规范的自己的Promise。
根据规范，Promise 共有三种状态 pending，fulfilled，rejected，我们使用 state 来表示 promise 当前的状态，使用 value 来表示当前值或原因。当然还有最重要的 then 方法。同时我们还需要一些辅助函数，比如 isFunction。
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
|
const PENDING = 0;
const FULFILLED = 1;
const REJECTED = 2;
function () {
this.state = PENDING;
// 值或原因
this.value = void 0;
}
Promise.prototype.then = function (onFulfilled, onRejected) {
// 2.2.1
if (isFunction(onFulfilled) || isFunction(onRejected)) {
this.onFulfilled = onFulfilled;
this.onRejected = onRejected;
}
// 根据2.2.7，
// then必须返回一个 promise，但它还有其他的规则，
// 这里我们先不管，直接返回当前 promise
return this;
};
function isFunction (func) {
return typeof func === 'function';
}
function isObject(obj) {
return typeof obj === 'object';
}
|
接着，我们定义两个函数，可以将 promise 转换为 fulfilled 或 rejected。
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 doResolve (promise, value) {
promise.state = FULFILLED;
promise.value = value;
if (isFunction(promise.onFulfilled)) {
// 2.2.4
// 需要确保onFulfilled和onRejected的异步执行，
// 是在调用then的事件轮训时间片之后，且调用栈为空。
// 更多详情可看http://one-pieces.me/2018/11/14/24-Promises-A-%E8%A7%84%E8%8C%83/#3-%E6%B3%A8%E9%87%8A
setTimeout(() => {
promise.onFulfilled(promise.value);
}, 0);
}
return promise;
}
function doReject (promise, reason) {
promise.state = REJECTED;
promise.value = reason;
if (isFunction(promise.onRejected)) {
setTimeout(() => {
promise.onRejected(promise.value);
}, 0);
}
return promise;
}
|
最后，我们还需要一个 resolver，将刚才定义的 doResolve 和 doReject 暴露给 Promise 的构造函数。想想我们平时是怎么 new 一个 Promise的？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function safelyResolveThen(promise, then) {
try {
then(function (value) {
doResolve(promise, value);
}, function (reason) {
doReject(promise, reason);
})
} catch (e) {
doReject(promise, e);
}
}
// 然后修改 Promise 构造函数
function (resolver) {
this.state = PENDING;
// 值或原因
this.value = void 0;
safelyResolveThen(this, resolver);
}
|
到这里，Promise 最核心的功能已经实现。可以很容易地看出，这里 Promise 的底层实现使用了回调（callback）
原文:大专栏 25.Promise原理及实现
标签：function,25,value,onFulfilled,Promise,原理,promise,onRejected
来源： https://www.cnblogs.com/chinatrump/p/11607050.html