网站的建设与运营专业,做saas网站可行吗,logo免费一键生成,怎么建立自己的企业网站概述 从上次更新Promise/A规范后#xff0c;已经很久没有更新博客了。之前由于业务需要#xff0c;完成了一个TypeScript语言的Promise库。这次我们来和大家一步一步介绍下#xff0c;我们如何实现一个符合Promise/A规范的Promise库。 如果对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作为原因拒绝promiseif (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 thenableref 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 thenableref 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作为原因拒绝promiseif (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如下 resolverejectallrace下面我们就一个一个方法来看下。 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 promiselet 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。
