9.2. 构造函数
- var p = new Promise(executor(resolve, reject));
9.3. 静态方法
9.4. 继承原型方法
- function defaultOnFulfilled(x){
- return x;
- }
- function defaultOnRejected(e){
- throw e;
- }
10. promises 的优势与劣势
10.1. 优势
- fetch(url)
- .then(request => request.text())
- .then(str => ...)
- System.import(‘some_modle.js’)
- .then(some_module => {
- ...
- })
- fs.readFile(name, opts?, function(err, data))
- readFilePromisified(name, opts?)
- .then(dataHandler, errorHandler)
此外,promises 的优势还包括更好的错误处理机制(异常的集成)和组合更任意更容易(因为你可以使用一些同步的工具,比如 Array.prototype.map())。
10.2. 劣势
),关于链式处理普通的事件监听的巧妙方式。
11. promises 与 生成器
- Q.spawn(function* () {
- try {
- let [foo, bar] = yield Promise.all([ // (A)
- httpGet(‘foo.json’),
- httpGet(‘bar.json’)
- ]);
- render(foo);
- render(bar);
- } catch (e){
- console.log(‘Read failed: ‘+ e );
- }
- });
)。之前例子作为异步函数应该如下。底层,并没有较多不同 – 异步函数基于生成器。
- asyc function(){
- try {
- let [foo, bar] = await Promise.all([
- httpGet(‘foo.json’),
- httpGet(‘bar.json’)
- ]);
- render(foo);
- render(bar);
- } catch (e){
- console.log(‘Read failed: ‘+ e );
- }
- }
12. 调试 promises
- function first(){
- setTimeout(function () {
second(‘a’) }, 0); //(A)
- }
- function second(){
- setTimeout(function () {
third(‘b’) }, 0); //(B)
- }
- function third(){
- debugger;
- }
- first();
正如截图中所示,调试器展现一个包含三个函数的跟踪堆栈。它包含了 line A 和 line B 处的异步函数。
13. promises 内部窥秘
)。为了更容易理解,将不会完全匹配 API。但是它将足够使你了解在实现 promises 过程会中面对的各种难题。
13.1 一个独立的 promise
- var dp = new DemoPromise();
- dp.resolve(‘abc’);
- dp.then(function(value){
- console.log(value); // abc
- });
- DemoPromise.prototype.then = function (onFulfilled, onRejected) {
- var self = this;
- var fulfilledTask = function () {
- onFulfilled(self.promiseResult);
- };
- var rejectedTask = function () {
- onRejected(self.promiseResult);
- };
- switch (this.promiseState) {
- case ‘pending’:
- this.fulfillReactions.push(fulfilledTask);
- this.rejectReactions.push(rejectedTask);
- break;
- case ‘fulfilled’:
- addToTaskQueue(fulfilledTask);
- break;
- case ‘rejected’:
- addToTaskQueue(rejectedTask);
- break;
- }
- };
- function addToTaskQueue(task) {
- setTimeout(task, 0);
- }
将不做任何事情(确保一个 promise 只被处理一次)。否则,promise 的状态转变为 fulfilled 并且结果缓存到 this.promiseResult。所有入队到通过状态 reactions 的将被立即执行。
- Promise.prototype.resolve = function (value) {
- // 为执行回调函数方法 如果不为状态 pending 为在 then 时刻已经处理执行过,立即跳出
- if (this.promiseState !== ‘pending’) return;
- this.promiseState = ‘fulfilled’;
- this.promiseResult = value;
- this._clearAndEnqueueReactions(this.fulfillReactions);
- return this; // 链式
- };
- Promise.prototype._clearAndEnqueueReactions = function (reactions) {
- this.fulfillReactions = undefined;
- this.rejectReactions = undefined;
- reactions.map(addToTaskQueue);
- };
13.2 链式(注意,这部分已经为下一步扁平化做好了基础)
成都
网站建设
不管它们所传递的是什么, promise 通过 then() 返回出来。
- DemoPromise.prototype.then = function (onFulfilled, onRejected) {
- var returnValue = new DemoPromise(); // (A)
- var self = this;
-
- var fulfilledTask;
- if (typeof onFulfilled === ‘function’) {
- fulfilledTask = function () {
- var r = onFulfilled(self.promiseResult);
- returnValue.resolve(r); // (B)
- };
- } else {
- fulfilledTask = function () {
- returnValue.resolve(self.promiseResult); // (C)
- };
- }
-
- var rejectedTask;
- if (typeof onRejected === ‘function’) {
- rejectedTask = function () {
- var r = onRejected(self.promiseResult);
- returnValue.resolve(r); // (D)
- };
- } else {
- rejectedTask = function () {
- // Important: we must reject here!
- // Normally, result of `onRejected` is used to resolve
- returnValue.reject(self.promiseResult); // (E)
- };
- }
- ...
- return returnValue; // (F)
- };
13.3 扁平化
扁平化思想主要是使链式方式更为便捷:一般,将一个 reaction 返回的值传递到下一个 then()。如果我们返回一个 promise,不包裹的形式是最好的,像下面的例子:
- asyncFunc1()
- .then(function (value1){
- return asyncFunc2(); // A
- })
- .then(function (value2){
- // value2 为 asyncFunc2() promise 的通过状态。
- console.log(value2);
- });
- DemoPromise.prototype.resolve = function (value) {
- if (this.alreadyResolved) return;
- this.alreadyResolved = true;
- this._doResolve(value);
- return this; // enable chaining
- };
- DemoPromise.prototype._doResolve = function (value) {
- var self = this;
- // Is `value` a thenable?
- if (value !== null && typeof value === ‘object’
- && ‘then’ in value) {
- addToTaskQueue(function () {
// (A)
- value.then(
- function onFulfilled(value) {
- self._doResolve(value);
- },
- function onRejected(reason) {
- self._doReject(reason);
- });
- });
- } else {
- this.promiseState = ‘fulfilled’;
- this.promiseResult = value;
- this._clearAndEnqueueReactions(this.fulfillReactions);
- }
- };
13.4. 更详细的 Promise 状态
13.5. 异常
- var fulfilledTask;
- if (typeof onFulfilled === ‘function’) {
- fulfilledTask = function () {
- try {
- var r = onFulfilled(self.promiseResult); // (A)
- returnValue.resolve(r);
- } catch (e) {
- returnValue.reject(e);
- }
- };
- } else {
- fulfilledTask = function () {
- returnValue.resolve(self.promiseResult);
- };
- }
13.6. 揭示构造函数模式
14. 两个常用的 promise 附加方法
14.1. done()
- function doSomeThing(){
- asyncFunc()
- .then(f1)
- .catch(r1)
- .then(f2); // A
- }
- function doSomeThing(){
- asyncFunc()
- .then(f1)
- .catch(r1)
- .done(f2);
- }
又或者仅仅是插到最后一个 then() 之后(无参数):
- function doSomeThing(){
- asyncFunc()
- .then(f1)
- .catch(r1)
- .then(f2)
- .done();
- }
- Promise.prototype.done = function(onFulfilled, onRejected){
- this.then(onFulfilled, onRejected)
- .catch(function(reason){
- setTimeout( ()=>{
throw reason }, 0 );
- });
- };
14.2. finally()
- createPeaource(...)
- .then(function(value1){
... })
- .then(function(value2){
... })
- .finally(function(){
... });
- Promise.prototype.finally = function (callback) {
- let p = this.constructor;
- // 不在此调用回调函数,
- // 希望使用 then 来处理
- return this.then(
- // Callback fulfills: 传递参数结果
- // Callback rejects: 传递拒绝状态
- value => p.resolve(callback()).then(() => value),
- reason => p.resolve(callback()).then(() => {
throw reason })
- );
- };
- showSpinner();
- fetchGalleryData()
- .then(data => updateGallery(data) )
- .catch(showNoDataError)
- .finnally(hideSpinner);
- var HTTP = require(‘q-io/http’);
- var server = HTTP.Server(app);
- return server.listen(0)
- .then(function(){
... })
- finally(server.stop);
15. ES6 兼容的 promise 库
下面有一些 promise 的库,有一些 ES6 的API,意味着你在将来也可以用原生 ES6 代码替换。
16. 传统的异步代码的接口
放你使用一个 promsie 库时,有时是基于不支持 promsie 的异步代码。这段讲述一下 Node.js 风格的异步函数与 jQuery deferreds。
16.1 Node.js 的接口
- var readFile = Q.denideify( FS.readFile );
- readFile(‘foo,txt’, ‘utf-8’)
- .then(function(text){
- ....
- });
16.2. jQuery 的接口
- Promise.resolve(
- jQuery.ajax({
...})
- ).then(funciton(data){
- console.log(data);
- }).catch(function(reason){
- console.error(reason)
- });
17. 延伸阅读
1. Promises/A+( http://promisesaplus.com/
):Brian Cavalier 与 Domenic Denicola 编辑(JS promise 事实标准)
):来自 Jake Archibad(挺不错的 promise 简要介绍)
):来自 Tao(要点与技术)
)来自 Forbes Lindeasy
):来自 Domenic Denicola(为 Promise 构造函数使用的模式)
):来自 Pearl Chen
)
原文地址:
http://www.2ality.com/2014/10/es6-promises-api.html
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221476.html原文链接:https://javaforall.net
