异步操作是JavaScript最强大的功能之一。JavaScript的设计初衷是作为一种面向web的语言,因此具备响应用户行为(比如鼠标和键盘事件)的功能。Node.js使用回调函数代替事件驱动,进一步强化了JavaScript语言的异步编程能力。但是,随着异步编程被广泛使用,开发者们发现这两种异步模式(事件驱动和回调函数)并不能满足所有的产品需求。在这样的背景下,Promise应运而生。
Promise是实现异步编程的一种方式,其他编程语言中与Promise类似的功能称为future或defered。与事件驱动和回调函数类似,Promise的基本思想是实现延迟执行,并且对执行成功或失败有明确的标识,根据标识可以进行链式Promise操作。
在正式介绍Promise之前,我们首先讲解一些与之相关的基础知识。
JavaScript引擎的执行序列是单线程的,也就是说同一时间只能执行一段代码。这一点与Java或C++等支持多线程的语言不同。多线程允许多段代码同时执行,这意味着某一状态标识可能被多段代码同时修改,加大了维护难度,并且可能引起安全性问题。
由于JavaScript引擎只能同时执行一段代码,所以必须要对待执行的代码进行跟踪。我们成待执行的代码处于执行序列中。当一段代码准备执行时,就会被加入执行序列。待当前代码执行完毕后,事件循环(event loop)取出队列中的下一段代码并执行。事件循环是JavaScript引擎用于监控代码执行和管理执行序列的进程。执行序列是按照从头到尾的顺序依次执行的。
用户的鼠标点击和键盘输入会触发对应的事件(比如onclick)。随后,事件对应的响应函数被加入执行序列的末尾。这是JavaScript语言实现异步编程最基本的方式:事件响应函数只会在对应的事件触发后执行,并且响应函数运行在适当的执行上下文内。如下:
let button = document.getElementById("my-btn");
button.onclick = function(event) {
console.log("Clicked");
};
上述代码中的console.log("Clicked")在button被点击之前是不会被执行的。button被点击后,赋值给onclick的匿名函数被加入执行序列的末尾,等待它前面的代码执行完毕后,响应函数被执行。
事件驱动足够解决类似本例的简单需求,但是在处理连续的独立异步回调时显得捉襟见肘,因为你需要非常小心的跟踪事件的target(例如本例中的button)。另外,你必须确保在事件触发之前已经定义了对应的响应函数。比如本例中如果onclick被定义之前点击button,不会产生任何响应。
虽然事件驱动能够实现用户交互响应,但是在应对复杂需求时并不十分灵活。
Node.js使用回调函数实现异步编程。回调函数模式与事件驱动相同的地方是,指定代码在对应的条件触发后才会被执行。不同的是,延迟执行的回调函数作为一个参数被传入指定的函数。如下:
readFile("example.txt", function(err, contents) {
if (err) {
throw err;
}
console.log(contents);
});
console.log("Hi!");
上述代码使用Node.js经典的error-first回调函数。readFile()函数从硬盘中检索第一个参数指定的文件,检索完毕后执行第三个参数指定的回调函数。如果检索失败,回调函数中的err参数是一个包含失败信息的对象;如果检索成功,contents参数是一个包含文件信息的字符串。
本例中回调函数的工作流程如下:运行readFile()函数后,readFile()在从硬盘中检索文件时暂停占用JavaScript线程;随后console.log("Hi!")立即执行;当readFile()检索完毕之后,将第二个参数指定的回调函数加入JavaScript执行序列的末尾等待执行。
回调函数模式优于事件驱动的一点是,回调函数模式可以链式操作。如下:
readFile("example.txt", function(err, contents) {
if (err) {
throw err;
}
writeFile("example.txt", function(err) {
if (err) {
throw err;
}
console.log("File was written!");
});
});
上述代码中,readFile()检索成功后会执行另一个异步回调函数writeFile()。请注意每个回调函数都是error-first风格。readFile()检索完成后,如果没有发生错误,它的回调函数中又调用了writeFile()。随后,writeFile()执行完毕后在JavaScript执行序列末尾新增的回调函数。
尽管回调函数模式可以很好地满足一些应用场景,但是在复杂得场景下,回调函数的多重嵌套使用很容易引起所谓的callback hell。比如:
method1(function(err, result) {
if (err) {
throw err;
}
method2(function(err, result) {
if (err) {
throw err;
}
method3(function(err, result) {
if (err) {
throw err;
}
method4(function(err, result) {
if (err) {
throw err;
}
method5(result);
});
});
});
});
本例中回调函数的多重嵌套,令代码非常混乱,增加了理解和调试的难度。
回调函数在应对复杂需求时显得捉襟见肘。比如同时运行两个异步操作,两者都执行完毕后再调用回调函数;或者两个异步操作中只需要第一个执行完毕后启动回调函数。诸如此类的需求,你需要非常谨慎地使用嵌套回调和清理操作。有了promise,以上的需求便可以通过相对轻松的方式来解决。
Promise可以简单理解为一个异步操作结果的引用。与事件驱动模式的响应函数和回调函数模式的回调函数不同,Promise机制下的异步函数返回一个Promise,如下:
// readFile promises to complete at some point in the future
let promise = readFile("example.txt");
上述代码中,readFile()函数并非立即开始检索工作,而是延后执行。它返回一个代表异步操作的Promise对象,此后的逻辑可以在Promise对象上进行操作。
每个Promise的生命周期都很短。Promise的起始状态为pending状态,代表异步操作未完成。上例中提到的Promise在声明的时候(也就是readFile()返回Promise的时候)便立即进入pending状态。一旦异步操作执行完毕,便认为Promise已经稳定(settled)了,进入以下两种状态之一:
并不能预测Promise将进入哪一个状态,但是可以使用then()为每种状态添加对应的响应函数。
then()方法接收两个参数(任何实现then()方法的对象被称为thenable),第一个参数是Promise进入fullfilled状态的响应函数,其参数是异步操作执行成功后的数据信息;第二个参数是Promise进入rejection状态的响应函数,其参数是异步操作执行失败后的错误信息。
两个参数都是可选的,可以根据具体需求使用对应的组合模式,如下:
let promise = readFile("example.txt");
// 监听两种状态fulfilled和rejection
promise.then(function(contents) {
// fulfilled
console.log(contents);
}, function(err) {
// rejection
console.error(err.message);
});
// 只监听fullfilled状态,不监听rejection
promise.then(function(contents) {
// fullfilled
console.log(contents);
});
// 只监听rejection,不监听fullfilled
promise.then(null, function(err) {
// rejection
console.error(err.message);
});
如果只监听rejection状态,还可以使用catch()方法。如下:
promise.catch(function(err) {
// rejection
console.error(err.message);
});
//功能等价于:
promise.then(null, function(err) {
// rejection
console.error(err.message);
});
使用then()和catch()可以对Promise的不同状态做出合理的响应。Promise相对于事件驱动和回调函数的优势在于,不论异步操作执行成功或者失败,Promise都可以进行清晰合理的响应,而事件驱动模式下,异步操作失败将不会触发响应函数;回调函数模式下,必须时刻谨记error-first原则。
如果Promise没有rejection监听,那么所有的失败信息会被静默处理。所以,rejection监听是非常必要的,即便只是输入失败信息,以便调试。
Promise还有另外一种特性,即Promise稳定之后,仍然可以添加fullfilled和rejection的响应函数并且被执行。也就是说,可以在任何时刻添加响应监听,并且会被执行。如下:
let promise = readFile("example.txt");
// 原始监听响应
promise.then(function(contents) {
console.log(contents);
// 新增监听响应
promise.then(function(contents) {
console.log(contents);
});
});
上述代码中,在Promise的fulfilled响应函数内部给同一Promise又新增了fulfilled响应。此时Promise已经是fulfilled状态,所以新增的fulfilled响应函数被立即加入执行序列。rejection响应同理。
then()和catch()方法被调用时会生成一段待执行的逻辑。Promise响应的执行序列是独立于JavaScript主序列的。对于普通开发者而言,并不需要对Promise独立执行序列有深入了解,只要熟知JavaScript执行序列的工作原理即可。
通过Promise构造函数创建的Promise成为不稳定Promise。Promise构造函数接受一个参数,此参数是一个函数对象(也叫做executor),内部是Promise待执行的代码。executor接收两个函数对象作为参数:resolve()和reject()。resolve()函数在executor执行成功后被调用,reject()函数在executor执行失败后被调用。如下:
// Node.js example
let fs = require("fs");
function readFile(filename) {
return new Promise(function(resolve, reject) {
// 触发异步操作
fs.readFile(filename, { encoding: "utf8" }, function(err, contents) {
//检查错误
if (err) {
reject(err);
return;
}
// 检索成功后的回调
resolve(contents);
});
});
}
let promise = readFile("example.txt");
// listen for both fulfillment and rejection
promise.then(function(contents) {
// fulfillment
console.log(contents);
}, function(err) {
// rejection
console.error(err.message);
});
上述代码是Node.js使用Promise实现前文提到的readFile()函数。fs.readFile()被封装在一个Promise内。executor内部将错误信息作为参数传递给reject(),将成功检索的文件信息传递给resolve()。
需要注意的是,当readFile()被调用时,executor并非立即执行,而是被加入执行序列中延后执行。这跟setTimeout()或者setInterval()的机制类似,加入执行队列的逻辑延迟执行。但是使用setTimeout()和setInterval()时必须指定延迟执行的时间:
// add this function to the job queue after 500ms have passed
setTimeout(function() {
console.log("Timeout");
}, 500)
console.log("Hi!");
上述代码使用setTimeout延迟500毫秒执行内部代码。最终输出如下:
Hi!
Timeout
输出结果表明setTImeout()内部的代码在console.log("Hi!")后执行。Promise的工作模式与之类似。
Promise的exectuor将内部逻辑代码立即加入执行序列,等待它之前的逻辑执行完毕后执行。如下:
let promise = new Promise(function(resolve, reject) {
console.log("Promise");
resolve();
});
console.log("Hi!");
输出结果如下:
Hi!
Promise
executor总是等待执行序列内的其他逻辑执行完毕后才会被执行。同理,传递给then()和catch()的函数也是被立即加入执行序列,但是它们需要等待executor执行完毕后才会被执行。如下:
let promise = new Promise(function(resolve, reject) {
console.log("Promise");
resolve();
});
promise.then(function() {
console.log("Resolved.");
});
console.log("Hi!");
输出结果如下:
Hi!
Promise
Resolved
另外,fulfillment和rejection的响应函数总是在executor执行完毕后被加入到执行序列的末尾。
使用Promise构造函数是创建不稳定Promise的最佳方式,可以充分发挥executor的动态性。但是,如果只是想创建一个代表某个已知值的promise,并不需要一系列繁琐的执行调度。Promise提供了两个方法可以根据具体value快速创建promise。
Promise.resolve()方法接受一个参数,返回一个fulfilled状态的Promise。并未发生任何的执行调度,如果要获取这个Promise代表的value,你需要新增一个或多个fulfillment响应函数。如下:
let promise = Promise.resolve(42);
promise.then(function(value) {
console.log(value); // 42
});
上述代码首先创建了一个fulfilled状态的Promise,随后then()方法创建的fulfillment响应函数接受参数value的值为12。本例中的Promise永远不会触发rejection响应。
创建rejection状态Promise需要使用方法Promise.reject()。与Promise.resolve()类似,使用Promise.reject()创建的Promise的状态为rejection,任何rejection响应函数都会被触发:
let promise = Promise.reject(42);
promise.catch(function(value) {
console.log(value); // 42
});
使用Promise.resolve()或Promise.reject()创建的Promise是无修正的。
Promise.resolve()和Promise.reject()均可接受一个non-promise thenable对象作为参数。non-promise thenable对象是指实现了then()方法,并且then()方法接受两个参数:resolve和reject。如下:
var thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
上述代码定义的thenable对象处理then()方法以外,没有任何与promise相关的特性。使用Promise.resolve()可以将它转化为了一个fulfilled状态的promise。如下:
var thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
var p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
上述代码中,Promise.resolve()调用thenable.then()以确定promise的状态。代码执行了resolve(42),所以thenable的promise状态为fulfilled。随后新创建的fulfilled状态promise沿袭thenable的参数值42,所以p1的fulfillment响应函数的参数value值为42。Promise.reject()的工作模式与之类似:
var thenable = {
then: function(resolve, reject) {
reject(42);
}
};
var p1 = Promise.reject(thenable);
p1.catch(function(value) {
console.log(value); // 42
});
利用Promise.resolve()和Promise.reject()的以上工作模式可以更方便的处理thenable对象,而不必提前知道某个对象是否为promise对象。
如果executor内部抛出错误,将会触发promise的rejection响应函数。如下:
let promise = new Promise(function(resolve, reject) {
throw new Error("Explosion!");
});
promise.catch(function(error) {
console.log(error.message); // "Explosion!"
});
每个executor内部都有一个隐含的try-catch机制,能够捕捉错误并传递给rejection响应函数。也就是说,上述代码等价于以下形式:
// equivalent of previous example
let promise = new Promise(function(resolve, reject) {
try {
throw new Error("Explosion!");
} catch (ex) {
reject(ex);
}
});
promise.catch(function(error) {
console.log(error.message); // "Explosion!"
});
executor内部错误捕捉机制可以简化错误的捕捉和处理。
行文至此,可能部分读者认为promise不仅仅是功能强化版的响应函数和setTimeout(),但promise的功能并不仅限于此。下面我们将讨论如何使用链式promise来实现复杂的异步操作。
每次执行then()或者catch()都会创建并返回一个新的promise。新的promise只会在前一个promise进入fulfilled或者rejected状态后被执行。如下:
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value);
}).then(function() {
console.log("Finished");
});
输出结果如下:
42
Finished
调用p1.then()后返回新的promis。新promise的then()方法定义的fulfillment响应函数在第一个promise执行完毕后被执行。如果不使用链式操作,本例等价于以下形式:
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
// same as
let p2 = p1.then(function(value) {
console.log(value);
})
p2.then(function() {
console.log("Finished");
});
同理,p2.then()也会返回一个新promise。
通过链式操作promise可以捕捉前一个promise的fulfillment和rejection响应函数抛出的错误。如下:
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
throw new Error("Boom!");
}).catch(function(error) {
console.log(error.message); // "Boom!"
});
上述代码中p1的fulfillment响应函数抛出错误。随后链式调用catch()方法,也就是使用第二个promise的rejection响应函数捕捉错误。同理,rejection响应函数的错误也可以使用相同的方法捕捉:
let p1 = new Promise(function(resolve, reject) {
throw new Error("Explosion!");
});
p1.catch(function(error) {
console.log(error.message); // "Explosion!"
throw new Error("Boom!");
}).catch(function(error) {
console.log(error.message); // "Boom!"
});
上述代码中,executor首先抛出错误触发了p1的rejection响应函数。随后p1的rejection响应函数又抛出错误并被第二个promise的rejection响应捕捉到。通过这种机制,promise的链式调用可以捕捉到链条前面的错误并作出相应处理。
笔者建议链式操作promise时,在链条末尾添加rejection响应函数,以确保链条产生的错误被正确处理。
链式promise的另一个重要功能是可以从一个promise传递数据至下一个promise。前文提到executor内resolve()的数据可以传递给此promise的fulfillment响应函数。你可以通过fulfillment响应函数的返回值继续传递此数据。如下:
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value); // "42"
return value + 1;
}).then(function(value) {
console.log(value); // "43"
});
上述代码中,p1的fulfillment响应函数返回一个值(value+1)。因为executor传递来的value值为42,所以p1返回的值为43。随后,这个值被传递给第二个promise的fulfillment响应函数并被打印。
同理,rejection响应函数也可以通过返回值的方式传递数据:
let p1 = new Promise(function(resolve, reject) {
reject(42);
});
p1.catch(function(value) {
console.log(value); // "42"
return value + 1;
}).then(function(value) {
console.log(value); // "43"
});
上述代码中的executor内部调用reject()并传参42。随后这个值被传递给此promise的rejection响应函数,并返回value+1。虽然返回值是由rejection响应函数提供,但是仍然可以在下一个promise的fulfillment响应函数中使用。利用这种机制,可以在必要的情况下使用某个执行失败的promise重新唤醒整个promise链。
与fulfillment响应函数不同的是,如果rejection响应函数没有返回值,那么promise链后面的所有方法均不会被调用。如下:
let p1 = new Promise(function(resolve, reject) {
reject(42);
});
p1.catch(function(value) {
console.log(value); // "42"
}).then(function(value) {
console.log(value); // Never called
});
上述代码中的第二个console.log(value)不会被执行,因为上游的rejection响应函数没有返回值。换句话说,这条promise链已经断了。
fulfillment和rejection响应函数可以通过返回原始类型在promise之间传递数据,但是如果想传递对象类型怎么办?如果这个对象是一个promise对象呢?这种场景下,便需要一些额外的工作进行处理。请考虑下面这个例子:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
resolve(43);
});
p1.then(function(value) {
console.log(value); // 42
return p2;
}).then(function(value) {
console.log(value); // 43
});
上述代码中,p1的executor执行resolve(42),p1的fulfillment响应函数返回一个fulfilled状态的promise对象p2。随后p2的fulfillment响应函数被调用。如果p2是rejected状态,就会触发rejection响应(如果存在)而不是fulfillment响应函数。
需要注意的是,第二个fulfillment响应函数的归属对象并不是p2,而是第三个promise。前例等价于以下形式:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
resolve(43);
});
var p3 = p1.then(function(value) {
console.log(value); // 42
return p2;
});
p3.then(function(value) {
console.log(value); // 43
});
上述代码清晰地表明第二个fulfillment响应函数的归属对象是p3而不是p2。这个细微的差别非常重要,也解释了为何rejected状态p2不会触发第二个fulfillment响应函数。请看下面这个例子:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
reject(43);
});
p1.then(function(value) {
console.log(value); // 42
return p2;
}).then(function(value) {
console.log(value); // never called
});
上述代码中,由于p2是rejected状态,所以第二个fulfillment响应函数不会被触发。如果存在rejection响应,就会被正常触发。如下:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
reject(43);
});
p1.then(function(value) {
console.log(value); // 42
return p2;
}).catch(function(value) {
console.log(value); // 43
});
上述代码中的rejection响应函数被触发,并且接收p2传递来的数据43。
promise的executor被执行时,通过fulfillment和rejection响应函数返回的thenable对象并不会发生改变。executor按照创建顺序依次执行。thenable对象返回值可以支持开发者定义额外的响应,比如可以在fulfillment响应里异步创建一个新的promise并添加fulfillment响应。如下:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value); // 42
// create a new promise
var p2 = new Promise(function(resolve, reject) {
resolve(43);
});
return p2
}).then(function(value) {
console.log(value); // 43
});
上述代码中,p1的fulfillment响应函数内部创建一个新的promise。在p2进入fulfilled状态之前,第二个fulfillment响应函数不会被触发。
到目前为止,上文所举的例子都是每次只操作一个promise。然而在某些应用场景下,需要同时监控多个promise的运行转态。ES6提供了两个方法满足此需求:Promise.all()和Promise.race()。
Promise.all()接受一个参数,参数为待监控所有promise组成的数组,并且返回一个promise对象。返回的promise对象只有在参数数组中所有promise执行后才会执行,并且待所有promise进入fulfilled状态后进入fulfilled状态。如下:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
resolve(43);
});
var p3 = new Promise(function(resolve, reject) {
resolve(44);
});
var p4 = Promise.all([p1, p2, p3]);
p4.then(function(value) {
console.log(value); // [42, 43, 44]
});
上述代码中的p1、p2、p3的executor内部的resolve函数都传递一个数值。调用Promise.all()后创建了一个新promise对象p4,待p1-p3都进入fulfilled状态后,p4也进入fulfilled状态。传递给p4 fulfillment响应函数的参数是一个包含p1-p3所有resolve数值的数组:42、43、44。
一旦任意一个监控的promise进入rejected状态,Promise.all()创建的promise(p4)便会立即进入rejected状态,不会等待全部promise执行完毕。如下:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = new Promise(function(resolve, reject) {
reject(43);
});
var p3 = new Promise(function(resolve, reject) {
resolve(44);
});
var p4 = Promise.all([p1, p2, p3]);
p4.catch(function(value) {
console.log(value); // 43
});
上述代码中,p2的reject函数传递数值43。p4的rejection响应函数立即被调用,没有等待p1和p3执行完毕(p1和p3仍然会执行,但是p4不会等待它们执行完毕)。p4的rejection响应函数接收数据43表明rejected状态是由p2引起。
与Promise.all()相同,Promise.race()方法也接收一个数组参数,数组元素为待监控的promise,并且返回一个promise对象。与Promise.all()不同的是,一旦第一个promise执行完毕,Promise.race()返回的promise立即进入相应的状态。也就是说,如果参数数组的任何promise进入fulfilled状态,Promise.race()返回的promise立即进入fulfilled状态,不会等待剩余promise的执行结果。如下:
var p1 = Promise.resolve(42);
var p2 = new Promise(function(resolve, reject) {
resolve(43);
});
var p3 = new Promise(function(resolve, reject) {
resolve(44);
});
var p4 = Promise.race([p1, p2, p3]);
p4.then(function(value) {
console.log(value); // 42
});
上述代码中,p1是一个创建即fulfilled状态的promise,p2和p3需要执行调度才会进入fulfilled状态。p4的fulfillment响应函数立即被调用并且被传递数值42,而没有等待其余promise执行完毕。Promise.race()参数数组内的promise就像在进行一场竞速,看谁先进入稳定状态。一旦某个promise率先进入fulfilled状态,Promise.race()返回的promise便立即进入fulfilled状态;一旦某个promise率先进入rejected状态,Promise.race()返回的promise便立即进入rejected状态:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = Promise.reject(43);
var p3 = new Promise(function(resolve, reject) {
resolve(44);
});
var p4 = Promise.race([p1, p2, p3]);
p4.catch(function(value) {
console.log(value); // 43
});
上述代码中,p4的状态是rejected,因为p2比p1、p3率先进入稳定状态并且进入rejected状态。所以,即使p1和p3都是fulfilled状态,p4仍然与p2的状态保持一致。
第八章介绍的生成器(generator)可以便于组织异步任务调度:
var fs = require("fs");
var task;
function readConfigFile() {
fs.readFile("config.json", function(err, contents) {
if (err) {
task.throw(err);
} else {
task.next(contents);
}
});
}
function *init() {
var contents = yield readConfigFile();
doSomethingWith(contents);
console.log("Done");
}
task = init();
task.next();
然而这种工作模式下需要跟踪监控task,并且在每个异步函数中调用适当的方法函数(比如本例中的readConfigFile())。使用promise,只需要确保每个异步操作都返回一个promise对象,便可以很大程度上简化本例的异步代码:
var fs = require("fs");
function run(taskDef) {
// create the iterator
var task = taskDef();
// start the task
task.next();
// recursive function to iterate through
(function step() {
var result = task.next(),
promise;
// if there's more to do
if (!result.done) {
// resolve to a promise to make it easy
promise = Promise.resolve(result.value);
promise.then(function(value) {
task.next(value);
step();
}).catch(function(error) {
task.throw(error);
step();
});
}
}());
}
function readConfigFile() {
return new Promise(resolve, reject) {
fs.readFile("config.json", function(err, contents) {
if (err) {
reject(err);
} else {
resolve(contents);
}
});
});
}
run(function *() {
var contents = yield readConfigFile();
doSomethingWith(contents);
console.log("Done");
});
上述代码中的run()函数用来执行一个生成器并生产一个迭代器(iterator),使用task.next()启动任务,随后递归调用step()直到迭代器执行完毕。在step()函数内部,task.next()返回迭代器的结果。如果迭代器未执行完毕,result.done的值为false。此时result.value是一个promise对象,但是Promise.resolve()只有在value值不是promise对象时被正确执行。随后,fulfillment响应函数减速被传入的promise对象并在递归step()之前将这个promise对象传递给迭代器。同理,rejection响应函数在递归step()之前将包含错误信息的error对象传递给迭代器。
run()函数的工作模式可以在不暴露promise或callback的前提下合理调度生成器的异步任务。
与其他内置类型一样,promise可以作为基础类创建派生类,开发者可以创建自定义的promise变种。比如,如果想使用success()和failure()取代原生promise的then()和catch()方法,可以写成如下形式:
class MyPromise extends Promise {
// use default constructor
success(resolve, reject) {
return this.then(resolve, reject);
}
failure(reject) {
return this.catch(reject);
}
}
var promise = new MyPromise(function(resolve, reject) {
resolve(42);
});
promise.success(function(value) {
console.log(value); // 42
}).failure(function(value) {
console.log(value);
});
上述代码中,MyPromise是Promise的派生类型,它有两个自定义方法:success()和failure()。这两个方法内部使用this调用各自映射的Promise方法。创建MyPromise实例的语法和原生Promise相同,区别在于你可以使用success()和failure()代替原生Promise的then()和catch()。
根据class的继承规则,static方法也会被继承,所以MyPromise.resolve(), MyPromise.reject(), MyPromise.race()和MyPromise.all()这些方法仍然可以使用。后两个方法的功能表现与原生Promise对应的方法相同,但是前两个方法存在细微的差别。
无论是否有传参,MyPromise.resolve()和MyPromise.reject()都会返回一个MyPromise的实例对象。所以,如果一个原生Promise对象被传递给这两个方法,它在被resolve或reject之后返回一个MyPromise实例。如下:
var p1 = new Promise(function(resolve, reject) {
resolve(42);
});
var p2 = MyPromise.resolve(p1);
p2.success(function(value) {
console.log(value); // 42
});
console.log(p2 instanceof MyPromise); // true
上述代码中,p1是一个原生Promise对象,它被传递给MyPromise.resolve()。p2是被返回的MyPromise实例,随后p1的resolve值被传递给p2的fulfillment响应函数。
如果一个MyPromise实例被传递给MyPromise.resolve()或MyPromise.reject(),将不会被resolve或reject,而是被直接返回。除此之外,这个两个方法的其他功能表现与原生Promise相同。
Promise被提出的初衷是增强JavaScript语言异步编程的能力。鉴于事件驱动和回调函数模式都有各自的局限性,通过promise排列组合异步操作可以增强可控性和可调度性。promise的工作原理是通过执行调度在JavaScript引擎的执行序列中加入延迟执行的任务,并通过另外一条执行序列跟踪promise的fulfillment和rejection状态以便执行合理响应。
Promise有三种状态:pending、fulfilled和rejected。pending是promise的起始状态,随后进入fulfilled状态(执行成功)或rejected状态(执行失败)。promise稳定之后便可以添加每种状态的响应函数。then()方法可以用来添加fulfillment和rejection响应,catch()方法只能添加rejection响应。
promise可以组成promise链,并且可以在promise链中的promise之间传递数据。每次调用then()方法都会创建被返回一个新的promise对象,如果前一个promise被resolve,那么返回的promise对象也被resolve。promise链可以用来触发一系列异步事件的响应。此外,Promise.race()和Promise.all() 可以用来监控多个promise的执行状态,并作出合理响应。
使用生成器和promise可以更方便地调度异步任务。promise提供一个公用接口用来返回异步操作的结果。随后便可以使用生成器和yeild操作等待并处理异步响应。
越来越多的web API建立在promise的基础上,我们可以期待未来promise有更广泛的应用场景。