概述
从上次更新Promise/A+范例后，已良久没有更新博客了。之前由于营业须要，完成了一个TypeScript言语的Promise库。此次我们来和人人一步一步引见下，我们怎样完成一个相符Promise/A+范例的Promise库。
假如对Promise/A+范例还不太相识的同砚，发起先看看上一篇博客——前端基础知识贮备——Promise/A+范例。
完成流程
起首，我们来看下，在我完成的这一个Promise中，代码由下面这几部份构成：
- 全局异步函数实行器
- 常量与属性
- 类要领
- 类静态要领
经由过程上面这四个部份，我们便可以够获得一个完整的Promise。这四个部份相互有关联，接下来我们一个一个模块来看。
全局异步函数实行器
在之前的Promiz的源码剖析的博客中我有提到过，我们怎样来完成一个异步函数实行器。经由过程JavaScript的实行道理我们能够晓得，假如要完成异步实行相干函数的话，我们能够挑选运用宏使命和微使命，这一点在Promise/A+的范例中也有说起。因而，下面我们供应了一个用宏使命来完成异步函数实行器的代码供人人参考。
let index = 0;
if (global.postMessage) {
global.addEventListener('message', (e) => {
if (e.source === global) {
let id = e.data;
if (isRunningTask) {
nextTick(functionStorage[id]);
} else {
isRunningTask = true;
try {
functionStorage[id]();
} catch (e) {
}
isRunningTask = false;
}
delete functionStorage[id];
functionStorage[id] = void 0;
}
});
}
function nextTick(func) {
if (global.setImmediate) {
global.setImmediate(func);
} else if (global.postMessage) {
functionStorage[++index] = func;
global.postMessage(index, '*')
} else {
setTimeout(func);
}
}经由过程上面的代码我们能够看到，我们一共运用了setImmediate、postMessage、setTimeout这三个增添宏使命的要领来举行一步函数实行。
常量与属性
说完了怎样举行异步函数的实行，我们来看下相干的常量与属性。在完成Promise之前，我们须要定义一些常量和类属性，用于背面存储数据。让我们一个一个来看下。
常量
起首，Promise共有5个状况，我们须要用常量来举行定义，详细以下：
enum State {
pending = 0,
resolving = 1,
rejecting = 2,
resolved = 3,
rejected = 4
};这五个常量离别对应Promise中的5个状况，置信人人能够从名字中明白，我们就不多讲了。
属性
在Promise中，我们须要一些属性来存储数据状况和后续的Promise援用，详细以下：
class Promise {
private _value;
private _reason;
private _next = [];
public state: State = 0;
public fn;
public er;
}我们对属性举行逐一申明：
-
_value，示意在resolved状况时，用来存储当前的值。 -
_reason，示意在rejected状况时，用来存储当前的缘由。 -
_next，示意当前Promise背面随着then函数的援用。 -
fn，示意当前Promise中的then要领的第一个回调函数。 -
er，示意当前Promise中的then要领的的第二个回调函数（即catch的第一个参数，下面看catch完成要领便可以明白）。
类要领
看完了常量与类的属性，我们来看下类的静态要领。
Constructor
起首，假如我们要完成一个Promise，我们须要一个组织函数来初始化最初的Promise。详细代码以下：
class Promise {
constructor(resolver?) {
if (typeof resolver !== 'function' && resolver !== undefined) {
throw TypeError()
}
if (typeof this !== 'object') {
throw TypeError()
}
try {
if (typeof resolver === 'function') {
resolver(this.resolve.bind(this), this.reject.bind(this));
}
} catch (e) {
this.reject(e);
}
}
}从Promise/A+的范例来看，我们能够晓得，假如resolver存在而且不是一个function的话，那末我们就应当抛出一个毛病；不然，我们应当将resolve和reject要领传给resolver作为参数。
resolve && reject
那末，resolve和reject要领又是做什么的呢？这两个要领主如果用来让当前的这个Promise转换状况的，即从pending状况转换为resolving或许rejecting状况。下面让我们来详细看下代码：
class Promise {
resolve(value) {
if (this.state === State.pending) {
this._value = value;
this.state = State.resolving;
nextTick(this._handleNextTick.bind(this));
}
return this;
}
reject(reason) {
if (this.state === State.pending) {
this._reason = reason;
this.state = State.rejecting;
this._value = void 0;
nextTick(this._handleNextTick.bind(this));
}
return this;
}
}从上面的代码中我们能够看到，当resolve或许reject要领被触发时，我们都转变了当前这个Proimse的状况，而且异步挪用实行了_handleNextTick要领。状况的转变标志着当前的Promise已从pending状况转变成了resolving或许rejecting状况，而响应_value和_reson也示意上一个Promise通报给下一个Promise的数据。
那末，这个_handleNextTick要领又是做什么的呢？实在，这个要领的作用很简朴，就是用来处置惩罚当前这个Promise背面随着的then函数通报进来的回调函数fn和er。
then && catch
在相识_handleNextTick之前，我们们先看下then函数和catch函数的完成。
class Promise {
public then(fn, er?) {
let promise = new Promise();
promise.fn = fn;
promise.er = er;
if (this.state === State.resolved) {
promise.resolve(this._value);
} else if (this.state === State.rejected) {
promise.reject(this._reason);
} else {
this._next.push(promise);
}
return promise;
}
public catch(er) {
return this.then(null, er);
}
}由于catch函数挪用就是一个then函数的别号，我们下面就只议论then函数。
在then函数实行时，我们会建立一个新的Promise，然后将传入的两个回调函数用新的Promise的属性保留下来。然后，先推断当前的Promise的状况，假如已是resolved或许rejected状况时，我们马上挪用新的Promise中resolve或许reject要领，让下将当前Promise的_value或许_reason通报给下一个Promise，而且触发下一个Promise的状况转变。假如当前Promise的状况依然为pending时，那末就将这个新天生的Promise保留下来，等当前这个Promise的状况转变后，再触发新的Promise变化。末了，我们返回了这个Promise的实例。
handleNextTick
看完了then函数，我们便可以够来看下我们提到过的handleNextTick函数。
class Promise {
private _handleNextTick() {
try {
if (this.state === State.resolving && typeof this.fn === 'function') {
this._value = this.fn.call(getThis(), this._value);
} else if (this.state === State.rejecting && typeof this.er === 'function') {
this._value = this.er.call(getThis(), this._reason);
this.state = 1;
}
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
this._finishThisTypeScriptPromise();
}
// if promise === x, use TypeError to reject promise
// 假如promise和x指向同一个对象，那末用TypeError作为缘由谢绝promise
if (this._value === this) {
this.state = State.rejecting;
this._reason = new TypeError();
this._value = void 0;
}
this._finishThisTypeScriptPromise();
}
}我们先来看一个简朴版的_handleNextTick函数，如许能够协助我们疾速明白Promise主流程。
异步触发了_handleNextTick函数后，我们会推断当前用户处于的状况，假如当前Promise是resolving状况，我们就会挪用fn函数，即我们在then函数挪用时给新的Promise设置的谁人fn函数；而如过当前Promise是rejecting状况，我们就会挪用er函数。
上面提到的getThis要领是用来猎取特定的this值，详细的范例请求我们将在稍后再举行引见。
经由过程实行这两个同步的fn或er函数，我们能够获得当前Promise实行完传入回调后的值。在这里须要申明的是：我们在实行fn或许er函数之前，我们在_value和_reason中寄存的值，是上一个Promise通报下来的值。只有当实行完了fn或许er函数后，_value和_reason中寄存的值才是我们须要通报给下一个Promise的值。
人人到这里能够会新鲜，我们的this指向没有发生变化，然则为何我们的this指向的是谁人新的Promise，而不是本来的谁人Promise呢？
我们能够从别的一个角度来对待这个题目：我们当前的这个Promise是不是是由上一个Promise所发生的呢？假如是这类状况的话，我们便可以够明白，在上一个Promise发生当前Promise的时刻，就设置了fn和er两个函数。
人人能够又会问，那末我们第一个Promise的fn和er这两个参数是怎样来的呢？
那末我们就须要细致看下上面这个逻辑了。下面我们只议论第一个Promise处于pending的状况，其他的状况与这类情况基础雷同。第一个Promise由于没有上一个Promise去设置fn和er两个参数，因而这两个参数的值就是undefined。所以在上面的逻辑中，我们已排除了这类状况，直接进入了_finishThisTypeScriptPromise函数中。
我们在这里须要迥殊申明下的是，有些人会以为我们在挪用then函数传入的两个回调函数fn和er时，当前Promise就完毕了，实在并非如许，我们是获得了fn或许er两个函数的返回值，再将值通报给下一个Promise时，上一个Promise才会完毕。关于这个逻辑我们能够看下_finishThisTypeScriptPromise函数。
finishThisTypeScriptPromise
_finishThisTypeScriptPromise函数的代码以下：
class Promise {
private _finishThisTypeScriptPromise() {
if (this.state === State.resolving) {
this.state = State.resolved;
this._next.map((nextTypeScriptPromise) => {
nextTypeScriptPromise.resolve(this._value);
});
} else {
this.state = State.rejected;
this._next.map((nextTypeScriptPromise) => {
nextTypeScriptPromise.reject(this._reason);
});
}
}
}从_finishThisTypeScriptPromise函数中我们能够看到，我们在获得了须要通报给下一个Promise的_value或许_reason后，应用map要领逐一挪用我们保留的新天生的Promise实例，挪用它的resolve要领，因而我们又触发了这个Promise的状况从pending转变为resolving或许rejecting。
到这里我们就已完整相识了一个Promise从最最先的建立，到末了完毕的全部生命周期。下面我们来看下在Promise/A+范例中提到的一些分支逻辑的处置惩罚状况。
上一个Promise通报的value是Thenable实例
起首，让我们来相识下什么是Thenable实例。Thenable实例指的是属性中有then函数的对象。Promise就是的一种特别的Thenable对象。
下面，为了轻易解说，我们将用Promise来替代Thenable举行解说，其他的Thenable类人人能够参考相似思绪举行剖析。
假如我们在通报给我们的_value中是一个Promise实例，那末我们必须在守候传入的Promise状况转换到resolved以后，当前的Promise才够继承往下实行，即我们从传入的Promise中获得了一个非Thenable返回值时，我们才用这个值来挪用属性中的fn或许er要领。
那末，我们要怎样才猎取到传入的这个Promise的返回值呢？在Promise中实在用到了一个异常奇妙的要领：由于传入的Promise中有一个then函数（Thenable定义），因而我们就挪用then函数，在第一个回调函数fn中传入猎取_value，触发当前的Promise继承实行。假如是触发了第二个回调函数er，那末就用在er中获得的_reason来谢绝掉当前的Promise。详细推断逻辑以下：
class Promise {
private _handleNextTick() {
let ref;
let count = 0;
try {
// 推断传入的this._value是不是为一个thanable
// check if this._value a thenable
ref = this._value && this._value.then;
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
return this._handleNextTick();
}
if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {
// add a then function to get the status of the promise
// 在原有TypeScriptPromise后增添一个then函数用来推断原有promise的状况
try {
ref.call(this._value, (value) => {
if (count++) {
return;
}
this._value = value;
this.state = State.resolving;
this._handleNextTick();
}, (reason) => {
if (count++) {
return;
}
this._reason = reason;
this.state = State.rejecting;
this._value = void 0;
this._handleNextTick();
});
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
this._handleNextTick();
}
} else {
try {
if (this.state === State.resolving && typeof this.fn === 'function') {
this._value = this.fn.call(getThis(), this._value);
} else if (this.state === State.rejecting && typeof this.er === 'function') {
this._value = this.er.call(getThis(), this._reason);
this.state = 1;
}
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
this._finishThisTypeScriptPromise();
}
this._finishThisTypeScriptPromise();
}
}
}promise === value
在Promise/A+范例中，假如返回的_value值即是用户本身时，须要用TypeError毛病谢绝掉当前的Promise。因而我们须要在_handleNextTick中到场以下推断代码：
class Promise {
private _handleNextTick() {
let ref;
let count = 0;
try {
// 推断传入的this._value是不是为一个thanable
// check if this._value a thenable
ref = this._value && this._value.then;
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
return this._handleNextTick();
}
if (this.state !== State.rejecting && (typeof this._value === 'object' || typeof this._value === 'function') && typeof ref === 'function') {
// add a then function to get the status of the promise
// 在原有TypeScriptPromise后增添一个then函数用来推断原有promise的状况
...
} else {
try {
if (this.state === State.resolving && typeof this.fn === 'function') {
this._value = this.fn.call(getThis(), this._value);
} else if (this.state === State.rejecting && typeof this.er === 'function') {
this._value = this.er.call(getThis(), this._reason);
this.state = 1;
}
} catch (e) {
this.state = State.rejecting;
this._reason = e;
this._value = void 0;
this._finishThisTypeScriptPromise();
}
// if promise === x, use TypeError to reject promise
// 假如promise和x指向同一个对象，那末用TypeError作为缘由谢绝promise
if (this._value === this) {
this.state = State.rejecting;
this._reason = new TypeError();
this._value = void 0;
}
this._finishThisTypeScriptPromise();
}
}
}getThis
在Promise/A+范例中划定：我们在挪用fn和er两个回调函数时，this的指向有限定。在严厉形式下，this的值应当为undefined；在宽松形式下时，this的值应当为global。
因而，我们还须要供应一个getThis函数用于处置惩罚上述状况。详细代码以下：
class Promise {
...
}
function getThis() {
return this;
}类静态要领
我们经由过程上面说到的类要领和一些特定分支的逻辑处置惩罚，我们就已完成了一个相符基础功能的Promise类。那末，下面我们来看下ES6中供应的一些规范API我们怎样来举行完成。详细API以下：
- resolve
- reject
- all
- race
下面我们就一个一个要领来看下。
resolve && reject
起首我们来看下最简朴的resolve和reject要领。
class Promise {
public static resolve(value?) {
if (TypeScriptPromise._d !== 1) {
throw TypeError();
}
if (value instanceof TypeScriptPromise) {
return value;
}
return new TypeScriptPromise((resolve) => {
resolve(value);
});
}
public static reject(value?) {
if (TypeScriptPromise._d !== 1) {
throw TypeError();
}
return new TypeScriptPromise((resolve, reject) => {
reject(value);
});
}
}经由过程上面代码我们能够看到，resolve和reject要领基础上就是直接运用了内部的constructor要领举行Promise构建。
all
class Promise {
public static all(arr) {
if (TypeScriptPromise._d !== 1) {
throw TypeError();
}
if (!(arr instanceof Array)) {
return TypeScriptPromise.reject(new TypeError());
}
let promise = new TypeScriptPromise();
function done() {
// 统计另有若干未完成的TypeScriptPromise
// count the unresolved promise
let unresolvedNumber = arr.filter((element) => {
return element && element.then;
}).length;
if (!unresolvedNumber) {
promise.resolve(arr);
}
arr.map((element, index) => {
if (element && element.then) {
element.then((value) => {
arr[index] = value;
done();
return value;
});
}
});
}
done();
return promise;
}
}下面我们依据上面的代码来简朴说下all函数的基础思绪。
起首我们须要先建立一个新的Promise用于返回，保证背面用户挪用then函数举行后续逻辑处置惩罚时能够设置新Promise的fn和er这两个回调函数。
然后，我们怎样猎取上面Promise数组中每一个Promise的值呢？要领很简朴，我们在前面就已引见过：我们挪用了每一个Promise的then函数用来猎取当前这个Promise的值。而且，在每一个Promise完成时，我们都搜检下是不是一切的Promise都已完成，假如已完成，则触发新Promise的状况从pending转换为resolving或许rejecting。
race
class Promise {
public static race(arr) {
if (TypeScriptPromise._d !== 1) {
throw TypeError();
}
if (!(arr instanceof Array)) {
return TypeScriptPromise.reject(new TypeError());
}
let promise = new TypeScriptPromise();
function done(value?) {
if (value) {
promise.resolve(value);
}
let unresolvedNumber = arr.filter((element) => {
return element && element.then;
}).length;
if (!unresolvedNumber) {
promise.resolve(arr);
}
arr.map((element, index) => {
if (element && element.then) {
element.then((value) => {
arr[index] = value;
done(value);
return value;
});
}
});
}
done();
return promise;
}
}race的思绪与all基础一致。只是我们在处置惩罚函数上差别。当我们只需检测到数组中的Promise有一个已转换到了resolve或许rejected状况（经由过程没有then函数来举行推断）时，就会马上动身新建立的Promise示例的状况从pending转换为resolving或许rejecting。
总结
我们对Promise的异步函数实行器、常量与属性、类要领、类静态要领举行了逐一引见，让人人对全部Promise的组织和声明周期有了一个深度的明白和认知。在全部开辟中须要注意到的一些症结点和细节，我在上面也逐一申清楚明了。人人只须要根据这个思绪，对比Promise/A+范例便可以够完成一个相符范例的Promise库。
末了，给人人供应一个Promise/A+测试东西，人人完成了本身的Promise后，能够运用这个东西来测试是不是完整相符全部Promise/A+范例。固然，人人假如想运用我的现成代码，也迎接人人运用我的代码Github/typescript-proimse。
