共计 5252 个字符，预计需要花费 14 分钟才能阅读完成。
相干链接
- Promises/A+ 标准（原文）
- Promises/A+ 标准（译文）
- 本文代码地址
代码实现
Promise 的状态
enum States {
PENDING = "pending",
/**
* PENDING 状态，此时该 Promise 的后果是悬而未决的，不晓得会被 resolve，或是被 reject。* 只有当 Promise 的状态为 PENDING 时，resolve 和 reject 函数才能够执行一系列操作，否则只会抛出一个谬误。**/
FULFILLED = "fulfilled",
/**
* FULFILLED 状态，阐明此时 Promise 曾经被 resolve，“承诺实现了”。* 当 Promise 的状态为 FULFILLED 时，then 办法传入的 onFullfilled 函数能力间接退出微工作队列；* 若以后 Promise 的状态为 PENDING，onFullfilled 函数只能退出胜利时的回调函数队列。**/
REJECTED = "rejected",
/**
* REJECTED 状态，阐明此时 Promise 曾经被 reject，* 当 Promise 的状态为 REJECTED 时，then 办法传入的 onRejected 函数能力间接退出微工作队列；* 若以后 Promise 的状态为 PENDING，onRejected 函数只能退出失败时的回调函数队列。**/
}相干类型定义
interface Resolve<T> {(value: T | PromiseLike<T>): void;
}
interface Reject {(reason?: any): void;
}
interface Executor<T> {(resolve: Resolve<T>, reject: Reject): void;
}
/**
* Promises/A+ 只是一份标准，任何能通过测试的 Promise 实现都会被这份标准认可，而一些库和框架会实现本人的 Promise，而不是应用原生 ES6 Promise，这就导致了无奈间接应用 p instanceof Promise 来辨认 Promise 类型。* 因而辨认 Promise 是基于鸭子类型（duck typing）检测的，只有是一个 thenable 对象（即定义了 then 办法的对象），即会被辨认为 Promise。* 同理，下文中 resolvePromise 函数的参数 x 是 PromiseLike 类型而不是 Promise 类型。**/
interface PromiseLike<T> {
then<TResult1 = T, TResult2 = never>(onFulfilled?: ((value: T | PromiseLike<T>) => TResult1 | PromiseLike<TResult1>) | undefined | null,
onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
): PromiseLike<TResult1 | TResult2>;
}MyPromise 类及其构造函数
Promise 接管一个执行器函数作为参数，该执行器函数的两个参数 (resolve, reject) 由 Promise 外部定义。
class MyPromise<T> {
private state: States = States.PENDING; // Promise 的状态
private onFulfilledCbs = [] as (() => void)[]; // 胜利时的回调函数
private onRejectedCbs = [] as (() => void)[]; // 失败时的回调函数
private value!: T | PromiseLike<T>; // 该 Promise 传递的值，是一个非法的 JavaScript 值
private reason: any; // 示意该 Promise 失败起因的值
constructor(executor: Executor<T>) {
try {
// 作为参数传递给 Promise 的 executor 函数会被立刻调用
executor(this.resolve, this.reject);
} catch (e) {this.reject(e);
}
}
resolve: Resolve<T> = (value: T | PromiseLike<T>) => {
try {
// 因为 js 并没有提供间接用来创立微工作的 api，因而这里用 setTimeout 模仿创立微工作
setTimeout(() => {if (this.state === States.PENDING) {
/**
* 仅当 Promise 处于 PENDING 状态时，会执行 resolve 办法的理论逻辑。* resolve 办法会做以下几件事：* 1. 将 Promise 的状态更新为 FULFILLED；* 2. 将 resolve 承受的 value 值赋值给 Promise 的 value；* 3. 执行 onFulfilledCbs 队列中的所有回调函数，并清空该队列。**/
this.state = States.FULFILLED;
this.value = value;
this.onFulfilledCbs.forEach((fn) => fn());
this.onFulfilledCbs = [];}
});
} catch (e) {this.reject(e);
}
};
reject: Reject = (reason: any) => {
try {
// 用 setTimeout 模仿创立微工作
setTimeout(() => {if (this.state === States.PENDING) {
/**
* 仅当 Promise 处于 PENDING 状态时，会执行 reject 办法的理论逻辑。* reject 办法会做以下几件事：* 1. 将 Promise 的状态更新为 REJECTED；* 2. 将 reject 承受的 reason 值赋值给 Promise 的 reason；* 3. 执行 onRejectedCbs 队列中的所有回调函数，并清空该队列。**/
this.state = States.REJECTED;
this.reason = reason;
this.onRejectedCbs.forEach((fn) => fn());
this.onRejectedCbs = [];}
});
} catch (e) {this.reject(e);
}
};
}then 办法
then 办法接管两个可选参数，别离为 Promise 的胜利和失败状况的回调函数。
这两个函数不会立刻被调用，具体情况见代码正文。
then<TResult1 = T, TResult2 = never>(onFulfilled?: ((value: T | PromiseLike<T>) => TResult1 | PromiseLike<TResult1>) | undefined | null,
onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
): MyPromise<TResult1 | TResult2> {
// 为确保 onFulfilled 和 onRejected 是函数类型，须要做一个类型转换。onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (val: T | PromiseLike<T>) => val as any;
onRejected =
typeof onRejected === "function"
? onRejected
: (r: any) => {throw r;};
// then 办法的返回值是一个新的 Promise，这是 Promise 可能链式调用的起因
const promise2 = new MyPromise<TResult1 | TResult2>((resolve: Resolve<TResult1 | TResult2>, reject: Reject) => {if (this.state === States.FULFILLED) {
// Promise 已处于 FULFIILED 状态，将 onFulfilled 放入微工作队列中执行。setTimeout(() => {
try {let x = onFulfilled!(this.value);
this.resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e);
}
});
} else if (this.state === States.REJECTED) {
// Promise 已处于 REJECTED 状态，将 onRejected 放入微工作队列中执行。setTimeout(() => {
try {let x = onRejected!(this.reason);
this.resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e);
}
});
} else if (this.state === States.PENDING) {
/**
* Promise 仍处于 PENDING 状态，尚不能解决回调函数，间接将回调函数退出相应的回调队列。* 留神，resolve 中调用回调函数是在微工作中进行的，因而这里不再须要创立微工作。**/
this.onFulfilledCbs.push(() => {
try {let x = onFulfilled!(this.value);
this.resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e);
}
});
this.onRejectedCbs.push(() => {
try {let x = onRejected!(this.reason);
this.resolvePromise(promise2, x, resolve, reject);
} catch (e) {reject(e);
}
});
}
});
return promise2;
}resolvePromise 办法
resolvePromise<T>(promise: MyPromise<T>, x: T | PromiseLike<T>, resolve: Resolve<T>, reject: Reject) {
/**
* 因为 then 办法的返回值是一个 Promise，如果 then 办法的回调函数同样返回了 Promise，那么就会造成 Promise 的嵌套，因而须要有一个函数对 then 办法回调函数的返回值进行解决，resolvePromise 就是这个函数。* @param promise then 办法的返回值
* @param x then 回调函数的返回值
**/
// 避免循环援用
if (promise === x) {const e = new TypeError("TypeError: Circular reference");
reject(e);
}
let called = false; // 避免 resolve 和 reject 屡次调用
if (x && (typeof x === "object" || typeof x === "function")) {
try {const then = (x as PromiseLike<T>).then;
// 如果 x 是一个 thenable
if (typeof then === "function") {
then.call(
x,
(y: T | PromiseLike<T>) => {if (called) return;
called = true;
// 直到解析的对象不再是 thenable，取出其中的值
this.resolvePromise(promise, y, resolve, reject);
},
(r: any) => {if (called) return;
called = true;
reject(r);
}
);
} else {resolve(x);
}
} catch (e) {if (called) return;
called = true;
reject(e);
}
} else {resolve(x);
}
}测试流程
测试工具文档：Promises/A+ Compliance Test Suite
为了应用官网工具进行测试，须要在程序的最初增加如下代码：
// @ts-ignore
MyPromise.deferred = function () {let deferred: any = {};
deferred.promise = new MyPromise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});
return deferred;
};
// @ts-ignore
export = MyPromise;将 ts 代码编译为 js
tsc promise.ts运行测试
npx promises-aplus-tests promise.js测试后果:
参考文章
- Promise 的源码实现（完满合乎 Promise/A+ 标准）
- 实现一个 TS 版，合乎 Promise/A+ 标准的 Promise
- 《你不晓得的 JavaScript 中卷》
正文完
