目录
1、异步函数
异步函数,也称为“async/await”(语法关键字),是ES6期约模式在ECMAScript函数中的应用。
async/await是ES8规范新增的,这个特性从行为和语法上都增强了JavaScript,让以同步方式写的代码能够异步执行。
1.1 async
async关键字用于声明异步函数。这个关键字可以用在函数声明、函数表达式、箭头函数和方法上:
async function foo() {}
let bar = async function () {}
let baz = async () => {}
class O {
async f() {}
}
使用async关键字可以让函数具有异步特征,但总体上其代码仍然是同步求值的。
foo()函数仍然会在后面的指令之前被求值:
async function foo() {
console.log(1);
}
foo();
console.log(2);
// 1
// 2
异步函数如果使用return关键字返回了值(默认为undefined),这个值会被Promise.resolve()包装成一个期约对象。
async function foo() {
console.log(1);
return Promise.resolve(3);
}
// 给返回的期约添加一个解决处理程序
foo().then((x)=> {
console.log(x);
});
console.log(2);
// 1
// 2
// 3
异步函数的返回值期待(但实际上并不要求)一个实现thenable接口的对象,但常规的值也可以。
如果返回的是实现thenable接口的对象,则这个对象可以由提供给then()的处理程序“解包”。
如果不是,则返回值就被当作已经解决的期约。
// 返回一个原始值
async function foo() {
return 'foo';
}
foo().then(console.log);
// foo
// 返回一个没有实现thenable接口的对象
async function bar() {
return ['bar'];
}
bar().then(console.log);
// ['bar']
// 返回一个实现了thenable接口的非期约对象
async function baz() {
constthenable={
then(callback){callback('baz');}
};
return thenable;
}
baz().then(console.log);
// baz
// 返回一个期约
async function qux() {
return Promise.resolve('qux');
}
qux().then(console.log);
// qux
与在期约处理程序中一样,在异步函数中抛出错误会返回拒绝的期约:
async function foo() {
console.log(1);
throw3;
}
// 给返回的期约添加一个拒绝处理程序
foo().catch(console.log);
console.log(2);
// 1
// 2
// 3
拒绝期约的错误不会被异步函数捕获:
async function foo() {
console.log(1);
Promise.reject(3);
}
// Attach a rejected handler to the returned promise
foo().catch(console.log);
console.log(2);
// 1
// 2
//Uncaught(inpromise): 3
1.2 await
因为异步函数主要针对不会马上完成的任务,所以自然需要一种暂停和恢复执行的能力。
使用await关键字可以暂停异步函数代码的执行,等待期约解决。
使用期约的写法
let p = new Promise((resove, reject) => setTimeout(resove, 1000, 1));
p.then((x) => console.log(x)); // 1
使用async/await改造
async function foo() {
let p = new Promise((resove, reject) => setTimeout(resove, 1000, 1));
console.log(await p);
}
foo();
// 1
注意,await关键字会暂停执行异步函数后面的代码,让出JavaScript运行时的执行线程。(后面会详细介绍)
async function foo() {
console.log(1);
let p = new Promise((resove, reject) => setTimeout(resove, 1000, 2));
console.log(await p);
console.log(3);
}
async function bar () {
console.log(4)
}
foo();
bar();
// 1
// 4
// 2
// 3
await关键字期待(但实际上并不要求)一个实现thenable接口的对象,但常规的值也可以。
如果是实现thenable接口的对象,则这个对象可以由await来“解包”。
如果不是,则这个值就被当作已经解决的期约。下面的代码演示了这些情况:
// 等待一个原始值
async function foo() {
console.log(await 'foo');
}
foo();
// foo
// 等待一个没有实现thenable接口的对象
async function bar() {
console.log(await ['bar']);
}
bar();
// ['bar']
// 等待一个实现了thenable接口的非期约对象
async function baz() {
const thenable ={
then(callback) { callback('baz'); }
};
console.log(await thenable);
}
baz();
// baz
// 等待一个期约
async function qux() {
console.log(await Promise.resolve('qux'));
}
qux();
// qux
等待会抛出错误的同步操作,会返回拒绝的期约:
async function foo() {
console.log(1);
await(() => { throw 3; })();
}
// 给返回的期约添加一个拒绝处理程序
foo().catch(console.log);
console.log(2);
// 1
// 2
// 3
如前面的例子所示,单独的Promise.reject()不会被异步函数捕获,而会抛出未捕获错误。
不过,对拒绝的期约使用await则会释放(unwrap)错误值(将拒绝期约返回):
async function foo() {
console.log(1);
await Promise.reject(3);
console.log(4); // 这行代码不会执行
}
// 给返回的期约添加一个拒绝处理程序
foo().catch(console.log);
console.log(2);
// 1
// 2
// 3
await 的限制
await关键字必须在异步函数中使用
异步函数的特质不会扩展到嵌套函数
2、停止和恢复执行
使用await关键字之后的区别其实比看上去的还要微妙一些。
比如,下面的例子中按顺序调用了3个函数,但它们的输出结果顺序是相反的:
但是我执行后的输出顺序是‘baz’-'foo'-'bar'
async function foo() {
console.log(await Promise.resolve('foo'));
}
async function bar() {
console.log(await 'bar');
}
async function baz() {
console.log('baz');
}
foo();
bar();
baz();
// baz
// bar
// foo
2.1 async/await 执行顺序1
要完全理解await关键字,必须知道它并非只是等待一个值可用那么简单。
JavaScript运行时在碰到await关键字时,会记录在哪里暂停执行。
等到await右边的值可用了,JavaScript运行时会向消息队列中推送一个任务,这个任务会恢复异步函数的执行。
因此,即使await后面跟着一个立即可用的值,也会被异步求值。如下:
async function foo() {
console.log(2);
await null;
console.log(4);
}
console.log(1);
foo();
console.log(3);
// 1
// 2
// 3
// 4
代码执行步骤
(1)打印1;
(2)调用异步函数foo();
(3)(在foo()中)打印2;
(4)(在foo()中)await关键字暂停执行,为立即可用的值null向消息队列中添加一个任务;
(5)foo()退出;
(6)打印3;
(7)同步线程的代码执行完毕;
(8)JavaScript运行时从消息队列中取出任务,恢复异步函数执行;
(9)(在foo()中)恢复执行,await取得null值(这里并没有使用);
(10)(在foo()中)打印4;
(11)foo()返回。
2.2 async/await 执行顺序2
如果await后面是一个期约,则问题会稍微复杂一些。
此时,为了执行异步函数,实际上会有两个任务被添加到消息队列并被异步求值。
下面的例子虽然看起来很反直觉,但它演示了真正的执行顺序:
我在编辑器中执行代码输出顺序是先8、9后6 、7
async function foo() {
console.log(2);
console.log(await Promise.resolve(8));
console.log(9);
}
async function bar() {
console.log(4);
console.log(await 6);
console.log(7);
}
console.log(1);
foo();
console.log(3);
bar();
console.log(5);
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
代码执行步骤
(1)打印1;
(2)调用异步函数foo();
(3)(在foo()中)打印2;
(4)(在foo()中)await关键字暂停执行,向消息队列中添加一个期约在落定之后执行的任务;
(5)期约立即落定,把给await提供值的任务添加到消息队列;
(6)foo()退出;
(7)打印3;
(8)调用异步函数bar();
(9)(在bar()中)打印4;
(10)(在bar()中)await关键字暂停执行,为立即可用的值6向消息队列中添加一个任务;
(11)bar()退出;
(12)打印5;
(13)顶级线程执行完毕;
(14)JavaScript运行时从消息队列中取出解决await期约的处理程序,并将解决的值8提供给它;
(15)JavaScript运行时向消息队列中添加一个恢复执行foo()函数的任务;
(16)JavaScript运行时从消息队列中取出恢复执行bar()的任务及值6;
(17)(在bar()中)恢复执行,await取得值6;
(18)(在bar()中)打印6;
(19)(在bar()中)打印7;
(20)bar()返回;
(21)异步任务完成,JavaScript从消息队列中取出恢复执行foo()的任务及值8;
(22)(在foo()中)打印8;
(23)(在foo()中)打印9;
(24)foo()返回。
3. 异步函数策略
在使用异步函数时,还是有些问题要注意。
3.1 使用 sleep()
async function sleep (dleay) {
return new Promise((resolve, reject)=> setTimeout(resolve, dleay));
}
async function foo() {
const t0 = Date.now();
await sleep(1000); // 暂停约 1000 毫秒
console.log(Date.now() - t0);
}
foo();
// 1015
3.2 利用平行执行
如果使用await时不留心,则很可能错过平行加速的机会。
来看下面的例子,其中顺序等待了5个随机的超时:
async function randomDelay(id) {
// 延迟0~1000 毫秒
const delay = Math.random() * 1000;
return new Promise((resolve) => setTimeout(() => {
console.log(`${id} finished`);
resolve();
}, delay));
}
async function foo() {
const t0 = Date.now();
await randomDelay(0);
await randomDelay(1);
await randomDelay(2);
await randomDelay(3);
await randomDelay(4);
console.log(`${Date.now() - t0}ms elapsed`);
}
foo();
// 0 finished
// 1 finished
// 2 finished
// 3 finished
// 4 finished
// 877ms elapsed
用一个for循环重写,就是:
async function randomDelay(id) {
// 延迟0~1000 毫秒
const delay = Math.random() * 1000;
return new Promise((resolve) => setTimeout(() => {
console.log(`${id} finished`);
resolve();
}, delay));
}
async function foo() {
const t0 = Date.now();
for(let i=0;i<5;++i){
await randomDelay(i);
}
console.log(`${Date.now() - t0}ms elapsed`);
}
foo();
// 0 finished
// 1 finished
// 2 finished
// 3 finished
// 4 finished
// 877ms elapsed
用数组和for循环再包装一下就是:
async function randomDelay(id) {
// 延迟0~1000 毫秒
const delay = Math.random() * 1000;
return new Promise((resolve) =>
setTimeout(() => {
console.log(`${id} finished`);
resolve();
}, delay)
);
}
async function foo() {
const t0 = Date.now();
const promises = Array(5)
.fill(null)
.map((_, i) => randomDelay(i));
for (const p of promises) {
await p;
}
console.log(`${Date.now() - t0}ms elapsed`);
}
foo();
// 4 finished
// 2 finished
// 1 finished
// 0 finished
// 3 finished
// 877ms elapsed
注意,虽然期约没有按照顺序执行,但await按顺序收到了每个期约的值:
async function randomDelay(id) {
// 延迟0~1000 毫秒
const delay = Math.random() * 1000;
return new Promise((resolve) => setTimeout(() => {
console.log(`${id} finished`);
resolve(id);
}, delay));
}
async function foo() {
const t0 = Date.now();
const promises = Array(5).fill(null).map((_, i) => randomDelay(i));
for (const p of promises) {
console.log(`awaited ${await p}`);
}
console.log(`${Date.now() - t0}ms elapsed`);
}
foo();
// 1 finished
// 2 finished
// 4 finished
// 3 finished
// 0 finished
// awaited 0
// awaited 1
// awaited 2
// awaited 3
// awaited 4
// 645ms elapsed
3.3 串行执行期约
使用async/await,期约连锁会变得很简单:
async function addTwo(x) {
return x + 2;
}
async function addThree(x) {
return x + 3;
}
async function addFive(x) {
return x + 5;
}
async function addTen(x) {
for (const fn of [addTwo, addThree, addFive]) {
x = await fn(x);
}
return x;
}
addTen(9).then(console.log); // 19
3.4 栈追踪与内存管理
期约与异步函数的功能有相当程度的重叠,但它们在内存中的表示则差别很大。
看看下面的例子,它展示了拒绝期约的栈追踪信息:
function fooPromiseExecutor(resolve, reject) {
setTimeout(reject, 1000, 'bar');
}
function foo() {
new Promise(fooPromiseExecutor);
}
foo();
// Uncaught (in promise) bar
// setTimeout
// setTimeout (async)
// fooPromiseExecutor
// foo
根据对期约的不同理解程度,以上栈追踪信息可能会让某些读者不解。
栈追踪信息应该相当直接地表现JavaScript引擎当前栈内存中函数调用之间的嵌套关系。
在超时处理程序执行时和拒绝期约时,我们看到的错误信息包含嵌套函数的标识符,那是被调用以创建最初期约实例的函数。
可是,我们知道这些函数已经返回了,因此栈追踪信息中不应该看到它们。
答案很简单,这是因为JavaScript引擎会在创建期约时尽可能保留完整的调用栈。
在抛出错误时,调用栈可以由运行时的错误处理逻辑获取,因而就会出现在栈追踪信息中。
当然,这意味着栈追踪信息会占用内存,从而带来一些计算和存储成本。
如果在前面的例子中使用的是异步函数,那又会怎样呢?比如:
function fooPromiseExecutor(resolve, reject) {
setTimeout(reject, 1000, 'bar');
}
async function foo() {
await new Promise(fooPromiseExecutor);
}
foo();
// Uncaught (in promise) bar
// foo
// asyncfunction(async)
// foo
这样一改,栈追踪信息就准确地反映了当前的调用栈。
fooPromiseExecutor()已经返回,所以它不在错误信息中。
但foo()此时被挂起了,并没有退出。
JavaScript运行时可以简单地在嵌套函数中存储指向包含函数的指针,就跟对待同步函数调用栈一样。
这个指针实际上存储在内存中,可用于在出错时生成栈追踪信息。
这样就不会像之前的例子那样带来额外的消耗,因此在重视性能的应用中是可以优先考虑的。