异步编程

异步编程主要是为了不想为等待某一个异步操作而阻塞线程得行为。

同步和异步

同步行为对应内存中顺序执行得处理器指令。每条指令都会按顺序来执行。例如：

let x = 3;

x = x + 4;

如上可以看出，每一步都可以推断出程序的状态，后面得指令总是在前面得指令完成后执行。

相对的异步行为类似于系统中断，即当前进程外部得实体可以触发代码执行。异步操作是经常必要的，因为强制进程等待一个长时间得操作通常是不可行得。例如要访问高延迟得资源等：

let x = 3;

setTimeout(() => x = x + 4, 1000);

如上代码与同步代码执行的任务是一样，都是两个数相加，但这一次执行线程不知道x值何时会变化，因这取决于回调何时从消息队列出列并执行。

异步代码不容易推断。到底什么时候触发中断，这对JS运行时来说时一个黑盒，因此实际上无法预知。为了让后续代码能够使用 x，异步执行的函数需要在更新 x 的值以后通知其他代码。如果程序不需要这个值，那么就只管继续执行，不必等待这个结果了。

以往的异步编程模式

异步行为在以前的JS不是很理想，早期只支持定义回调函数来表明异步操作完成。串联多个异步操作是一个常见的问题，通常需要深度嵌套回调函数回调地狱来解决。

异步返回值

function double(value, callback) {

setTimeout(() => callback(value * 2), 1000);

}

double(3, (x) => console.log(`I was given: ${x}`));

// I was given: 6（大约 1000 毫秒之后）

这里的 setTimeout 调用告诉 JavaScript 运行时在 1000 毫秒之后把一个函数推到消息队列上。这个函数会由运行时负责异步调度执行。而位于函数闭包中的回调及其参数在异步执行时仍然是可用的。

失败处理

function double(value, success, failure) {

setTimeout(() => {

try {

if (typeof value !== 'number') {

throw 'Must provide number as first argument';

}

success(2 * value);

} catch (e) {

failure(e);

}

}, 1000);

}

const successCallback = (x) => console.log(`Success: ${x}`);

const failureCallback = (e) => console.log(`Failure: ${e}`);

double(3, successCallback, failureCallback);

double('b', successCallback, failureCallback);

// Success: 6（大约 1000 毫秒之后）

// Failure: Must provide number as first argument（大约 1000 毫秒之后）

这种模式已经不可取了，因为必须在初始化异步操作时定义回调。异步函数的返回值只在短时间内存在，只有预备好将这个短时间内存在的值作为参数的回调才能接收到它。

嵌套异步回调

function double(value, success, failure) {

setTimeout(() => {

try {

if (typeof value !== 'number') {

throw 'Must provide number as first argument';

}

success(2 * value);

} catch (e) {

failure(e);

}

}, 1000);

}

const successCallback = (x) => {

double(x, (y) => console.log(`Success: ${y}`));

};

const failureCallback = (e) => console.log(`Failure: ${e}`);

double(3, successCallback, failureCallback);

// Success: 12（大约 1000 毫秒之后）

显然，随着代码越来越复杂，回调策略是不具有扩展性的。“回调地狱”这个称呼可谓名至实归。嵌套回调的代码维护起来就是噩梦

期约

期约是对尚不存在结果的一个替身。

期约基础

ES6新增引用类型Promise，可以通过new操作符来实例化，创建新期约时需要传入执行器函数作为参数。

let p = new Promise(() => {});

setTimeout(console.log, 0, p); // Promise <pending>

之所以说是应付解释器，是因为如果不提供执行器函数，就会抛出 SyntaxError。

期约状态

输出一个期约实例，控制台输出表明实例处于待定状态，也就是说期约是一个有状态得对象，会处于以下三种状态之一：

待定 pending
兑现 fulfilled，resolved
拒绝 rejected

待定是期约最初始状态，在待定状态下期约可以落定为兑现或拒绝状态，无论落定为哪种状态都是不可逆得，当然也不能保证期约必然会脱离待定状态。

重要的是期约得状态是私有的，不能直接通过JS检测到。主要是为了避免根据读取到的期约状态，以同步方式处理期约对象。另外期约的状态也不能被外部JS代码修改。这是期约故意将异步行为封装起来，从而隔离外部的同步代码。

解决值、拒绝理由及期约用例

期约主要有两大用途：首先是抽象的表示一个异步操作。期约的状态代表期约是否完成。

例子：比如一个http请求，如果状态码在200~299范围内，就将状态变为兑现，如果不在此范围内就变为拒绝。

为了支持此用例，每个期约只要状态切换为兑现，就会有一个私有的内部值。类似地，切换为决绝也是如此。并且默认值是undefined，在期约到达某个落定状态之前都会是这个值。

通过执行函数控制期约状态

由于期约的状态是私有的，所以只能在内部进行操作。内部操作在期约的执行器函数中完成。执行器主要有两项主要职责：初始化异步行为和控制状态的最终转换。其中，控制器期约状态的转换是通过调用它的两个函数参数实现。它们分别是resolve()和reject()。调用resolve状态会转换为兑现，反之reject()转换拒绝。

let p1 = new Promise((resolve, reject) => resolve());

setTimeout(console.log, 0, p1); // Promise <resolved>

let p2 = new Promise((resolve, reject) => reject());

setTimeout(console.log, 0, p2); // Promise <rejected>

// Uncaught error (in promise)

执行器函数是同步执行的，这是因为执行器函数是期约的初始化程序。无论resolve和reject哪个被调用，状态转换是不可撤销的，谁先执行谁定义状态。

let p = new Promise((resolve, reject) => {

resolve();

reject(); // 没有效果

});

setTimeout(console.log, 0, p); // Promise <resolved>

同步/异步执行的二元性

Promise 的设计很大程度上会导致一种完全不同于 JavaScript 的计算模式。下面的例子完美地展示了这一点，其中包含了两种模式下抛出错误的情形：

try {

throw new Error('foo');

} catch(e) {

console.log(e); // Error: foo

}

try {

Promise.reject(new Error('bar'));

} catch(e) {

console.log(e);

}

// Uncaught (in promise) Error: bar

第一个 try/catch 抛出并捕获了错误，第二个 try/catch 抛出错误却没有捕获到。乍一看这可能有点违反直觉，因为代码中确实是同步创建了一个拒绝的期约实例，而这个实例也抛出了包含拒绝理由的错误。这里的同步代码之所以没有捕获期约抛出的错误，是因为它没有通过异步模式捕获错误。从这里就可以看出期约真正的异步特性：它们是同步对象（在同步执行模式中使用），但也是异步执行模式的媒介。

在前面的例子中，拒绝期约的错误并没有抛到执行同步代码的线程里，而是通过浏览器异步消息队列来处理的。因此，try/catch 块并不能捕获该错误。代码一旦开始以异步模式执行，则唯一与之交互的方式就是使用异步结构——更具体地说，就是期约的方法。

期约的实例方法

实现Thenable接口

ECMAScript 暴露的异步结构中，任何对象都有一个 then()方法。这个方法被认为实现了Thenable 接口。下面的例子展示了实现这一接口的最简单的类：

class MyThenable {

then() {}

}

ECMAScript 的 Promise 类型实现了 Thenable 接口。这个简化的接口跟 TypeScript 或其他包中的接口或类型定义不同，它们都设定了 Thenable 接口更具体的形式

then

then方法接受最多两个参数：onResolved 处理程序和 onRejected 处理程序，两个参数都是可选的，如果提供的话，则会在期约分别进入兑现和拒绝状态时执行。但是因为期约只能转换为最终状态一次，所以这两个操作一定是互斥的。所以如果指向提供onRejected参数，那就要在onResolved 参数上传undefined。这样有助于避免在内存中创建多余的兑现，对期待函数参数的类型系统也是一个交代。

let p1 = new Promise((resolve, reject) => setTimeout(resolve, 3000));

let p2 = new Promise((resolve, reject) => setTimeout(reject, 3000));

p1.then(

() => onResolved('p1'),

() => onRejected('p1')

);

p2.then(

() => onResolved('p2'),

() => onRejected('p2')

);

// 非函数处理程序会被静默忽略，不推荐

p1.then('gobbeltygook');

// 不传 onResolved 处理程序的规范写法

p2.then(null, () => onRejected('p2'));

Promise.prototype.then()方法返回一个新的期约实例：

let p1 = new Promise(() => {});

let p2 = p1.then();

setTimeout(console.log, 0, p1); // Promise <pending>

setTimeout(console.log, 0, p2); // Promise <pending>

setTimeout(console.log, 0, p1 === p2); // false

catch

catch方法用于给期约添加拒绝处理程序，这个方法只接受一个参数onRejected 处理程序。事实上，这个方法就是一个语法糖，调用它就相当于调用 Promise.prototype. then(null, onRejected)。

let p = new Promise((res,rep)=>{

res(1)

});

p.then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

})

finally

finally方法用于给期约添加onFinally处理程序，这个程序在解决或拒绝状态都会执行，主要用来清理沉余代码。

let p = new Promise((res,rep)=>{

res(1)

});

p.then(res=>{

console.log(res)

}).catch(err=>{

console.log(err)

}).finally(()=>{

console.log(11)

})

Promise本身是同步的，回调时异步的

let synchronousResolve;

// 创建一个期约并将解决函数保存在一个局部变量中

let p = new Promise((resolve) => {

synchronousResolve = function () {

console.log('1: invoking resolve()');

resolve();

console.log('2: resolve() returns');

};

});

p.then(() => console.log('4: then() handler executes'));

synchronousResolve();

console.log('3: synchronousResolve() returns');

// 实际的输出：

// 1: invoking resolve()

// 2: resolve() returns

// 3: synchronousResolve() returns

// 4: then() handler executes

如上可以看出，promise本身时同步的，因为时初始化异步行为，而then，catch和finally等回调函数会进入消息队列，并且等待同步代码执行完后执行。

邻近处理程序的执行顺序

如果给期约添加了多个程序，当期约状态变化时，相关处理程序会按照添加他们呢的顺序一次执行，无论是then、catch还是finally。

let p1 = Promise.resolve();

let p2 = Promise.reject();

p1.then(() => setTimeout(console.log, 0, 1));

p1.then(() => setTimeout(console.log, 0, 2));

// 1

// 2

p2.then(null, () => setTimeout(console.log, 0, 3));

p2.then(null, () => setTimeout(console.log, 0, 4));

// 3

// 4

p2.catch(() => setTimeout(console.log, 0, 5));

p2.catch(() => setTimeout(console.log, 0, 6));

// 5

// 6

p1.finally(() => setTimeout(console.log, 0, 7));

p1.finally(() => setTimeout(console.log, 0, 8));

// 7

// 8

传递解决值和拒绝理由

let p1 = new Promise((resolve, reject) => resolve('foo'));

p1.then((value) => console.log(value)); // foo

let p2 = new Promise((resolve, reject) => reject('bar'));

p2.catch((reason) => console.log(reason)); // bar

拒绝期约与拒绝错误处理

拒绝期约类似于throw()表达式，它们都代表一种程序状态，即需要中断或者特殊处理。

不同点在于：

1.throw表达式抛出错误时，js运行时的错误处理机制会停止执行抛出错误之后的任何指令，但是拒绝期约不会。

throw Error('foo');

console.log('bar'); // 这一行不会执行

Promise.reject(Error('foo'));

console.log('bar');

// bar

2.拒绝期约只能通过异步的onRejected处理程序捕获，不能通过try catch捕获，而throw可以：

Promise.reject(Error('foo')).catch((e) => {});

try {

Promise.reject(Error('foo'));

} catch(e) {}

// 上述代码会报错

try{

throw('12')

} catch(e){

console.log(e) // 12

}

期约连锁于期约合成

多个期约组合在一起可以构成强大的代码逻辑。这个组合可以通过两种方式实现：期约连锁于期约合成。

期约连锁

把期约逐个地串联起来是一种非常有用地编程模式。之所以这样做，是因为每一个期约实例地方法都会返回一个新的期约对象，而这个新期约又有自己的实例方法。这就是期约连锁。

let p = new Promise((resolve, reject) => {

console.log('first');

resolve();

});

p.then(() => console.log('second'))

.then(() => console.log('third'))

.then(() => console.log('fourth'));

// first

// second

// third

// fourth

虽然上述代码也可以通过同步任务实现，但是真正地用途是在串行地异步任务中。例如：

let p1 = new Promise((resolve, reject) => {

console.log('p1 executor');

setTimeout(resolve, 1000);

});

p1.then(() => new Promise((resolve, reject) => {

console.log('p2 executor');

setTimeout(resolve, 1000);

}))

.then(() => new Promise((resolve, reject) => {

console.log('p3 executor');

setTimeout(resolve, 1000);

}))

.then(() => new Promise((resolve, reject) => {

console.log('p4 executor');

setTimeout(resolve, 1000);

}));

// p1 executor（1 秒后）

// p2 executor（2 秒后）

// p3 executor（3 秒后）

// p4 executor（4 秒后）

提取成工厂函数就是：

function delayedResolve(str) {

return new Promise((resolve, reject) => {

console.log(str);

setTimeout(resolve, 1000);

});

}

delayedResolve('p1 executor')

.then(() => delayedResolve('p2 executor'))

.then(() => delayedResolve('p3 executor'))

.then(() => delayedResolve('p4 executor'))

// p1 executor（1 秒后）

// p2 executor（2 秒后）

// p3 executor（3 秒后）

// p4 executor（4 秒后）

这么做地目的就是为了简洁地将异步任务串行化，解决之前依赖回调地难题。

期约图

因为一个期约可以有任意多个处理程序，所以期约连锁可以构建有向非循环图的结构。这样，每个期约都是图中的一个节点，而使用实例方法添加的处理程序则是有向顶点。因为图中的每个节点都会等待前一个节点落定，所以图的方向就是期约的解决或拒绝顺序。下面的例子展示了一种期约有向图，也就是二叉树：

// A

// / \

// B C

// /\ /\

// D E F G

let A = new Promise((resolve, reject) => {

console.log('A');

resolve();

});

let B = A.then(() => console.log('B'));

let C = A.then(() => console.log('C'));

B.then(() => console.log('D'));

B.then(() => console.log('E'));

C.then(() => console.log('F'));

C.then(() => console.log('G'));

// A

// B allSettled

// C

// D

// E

// F

// G

Promise.all

Promise.all会在一组期约全部解决之后再解决。这个静态方法接受一个可迭代对象，返回新契约。期约地状态如果所有期约都是兑现，则Promise.all也是兑现，其中一个拒绝，那么Promise.all也是拒绝。

如果都成功则返回包含所有结果地数组。

const p1 = new Promise((resolve, reject) => {

resolve('hello');

});

const p2 = new Promise((resolve, reject) => {

reject('报错了');

});

Promise.all([p1, p2])

.then((result) => console.log(result))

.catch((e) => console.log(e)); // 报错了

const p1 = new Promise((resolve, reject) => {

resolve('hello');

});

const p2 = new Promise((resolve, reject) => {

resolve('hello2');

});

Promise.all([p1, p2])

.then((result) => console.log(result)) // ['hello', 'hello2']

.catch((e) => console.log(e));

使用Promise.all时，其中地期约如果对拒绝程序进行过处理，那么也会被判定为是兑现。

const p1 = new Promise((resolve, reject) => {

resolve('hello');

})

.then((result) => result)

.catch((e) => e);

const p2 = new Promise((resolve, reject) => {

reject('报错了');

})

.then((result) => result)

.catch((e) => e);

Promise.all([p1, p2])

.then((result) => console.log(result)) // [ 'hello', '报错了' ]

.catch((e) => console.log(e));

Promise.race

它跟Promise.all相似，区别在于它会返回状态最先变化地期约地值，也就是一组期约中谁先返回那么Promise.race就返回谁，状态同理。

const p1 = new Promise((resolve, reject) => {

setTimeout(() => {

resolve('hello');

}, 1000);

})

const p2 = new Promise((resolve, reject) => {

setTimeout(() => {

reject('报错了');

}, 2000);

})

Promise.race([p1, p2])

.then((result) => console.log(result)) // hello

.catch((e) => console.log(e));

Promise.race的主要用途在于取消异步操作，例如：

接口获取超时
取消异步操作

const timeout = new Promise((resolve, reject) => {

setTimeout(() => {

reject('Request timed out');

}, 3000);

});

const fetchFromAPI = new Promise((resolve, reject) => {

// 发送 API 请求

});

Promise.race([fetchFromAPI, timeout])

.then((result) => {

console.log(result); // 请求成功

})

.catch((error) => {

console.error(error); // 请求超时

});

Promise.allSettled

跟Promise.all相同，不同点是Promise.allSettled 是一个新的 Promise 方法，它不会因为某个 Promise 被 reject 而失败，而是会等待所有 Promise 完成（无论是 resolve 还是 reject）。

返回值是对象数组，对象中status是每一个期约的状态，value是兑现值，reason是拒绝值

const p1 = new Promise((resolve, reject) => {

resolve('hello');

})

const p2 = new Promise((resolve, reject) => {

reject('报错了');

})

Promise.allSettled([p1, p2])

.then((result) => console.log(result))

//[

// { status: 'fulfilled', value: 'hello' },

// { status: 'rejected', reason: '报错了' }

//]

串行期约合成

异步产生值并将其传给处理程序。基于后续期约使用之前期约的返回值来串联期约是期约的基本功能。这很像函数合成，即将多个函数合成为一个函数。

function addTwo(x) {return x + 2;}

function addThree(x) {return x + 3;}

function addFive(x) {return x + 5;}

function addTen(x) {

return addFive(addTwo(addThree(x)));

}

console.log(addTen(7)); // 17

当然Promise也可以这样使用：

function addThree(x) {return x + 3;}

function addFive(x) {return x + 5;}

function addTen(x) {

return Promise.resolve(x)

.then(addTwo)

.then(addThree)

.then(addFive);

}

addTen(8).then(console.log); // 18

使用 Array.prototype.reduce()可以写成更简洁的形式：

function addTwo(x) {return x + 2;}

function addThree(x) {return x + 3;}

function addFive(x) {return x + 5;}

function addTen(x) {

return [addTwo, addThree, addFive]

.reduce((promise, fn) => promise.then(fn), Promise.resolve(x));

}

addTen(8).then(console.log); // 18

这种模式可以提炼出一个通用函数，可以把任意多个函数作为处理程序合成一个连续传值的期约连锁。这个通用的合成函数可以这样实现：

function addTwo(x) {return x + 2;}

function addThree(x) {return x + 3;}

function addFive(x) {return x + 5;}

function compose(...fns) {

return (x) => fns.reduce((promise, fn) => promise.then(fn), Promise.resolve(x))

}

let addTen = compose(addTwo, addThree, addFive);

addTen(8).then(console.log); // 18

期约扩展

ES6 期约实现是很可靠的，但它也有不足之处。比如，很多第三方期约库实现中具备而 ECMAScript规范却未涉及的两个特性：期约取消和进度追踪。

期约取消

Promise中不提供期约取消功能，只能等待从等待转换成为兑现或拒绝。我们可以使用以下方式来实现期约的取消：

Promise.race
AbortController
第三方库Bluebird

AbortController 提供例子：

function cancellablePromise(signal) {

return new Promise((resolve, reject) => {

// 当信号被触发时，Promise被拒绝

signal.addEventListener('abort', () => {

reject(new Error('Operation was aborted'));

});

// 模拟异步操作

setTimeout(() => {

if (!signal.aborted) {

resolve('Operation completed');

}

}, 3000);

});

}

const controller = new AbortController();

const signal = controller.signal;

cancellablePromise(signal)

.then(result => console.log(result))

.catch(error => console.log(error.message));

// 取消请求

setTimeout(() => controller.abort(), 1000);

期约取消

直接展示代码：

class TrackablePromise extends Promise {

constructor(executor) {

const notifyHandlers = [];

super((resolve, reject) => {

return executor(resolve, reject, (status) => {

notifyHandlers.map((handler) => handler(status));

});

});

this.notifyHandlers = notifyHandlers;

}

notify(notifyHandler) {

this.notifyHandlers.push(notifyHandler);

return this;

}

}

let p = new TrackablePromise((resolve, reject, notify) => {

function countdown(x) {

console.log(x)

if (x > 0) {

notify(`${20 * x}% remaining`);

setTimeout(() => countdown(x - 1), 1000);

} else {

resolve();

}

}

countdown(10);

});

p.notify((x) => setTimeout(console.log, 0, 'progress:', x));

p.then(() => setTimeout(console.log, 0, 'completed'));

通过扩展Promise类为它添加notify方法来实现进度展示。

异步函数

ES8 的 async/await 旨在解决利用异步结构组织代码的问题。为此，ECMAScript 对函数进行了扩展，为其增加了两个新关键字：async 和 await。

async

async关键字用于声明异步函数，用在函数声明、函数表达式、箭头函数和方法上：

async function foo() {}

let bar = async function() {};

let baz = async () => {};

class Qux {

async qux() {}

}

如果异步函数使用return关键字返回了值没有返回就是undefined这个值就会被Promise.resolve包装成期约对象。

async function foo() {

console.log(1);

return 3;

}

// 给返回的期约添加一个解决处理程序

foo().then(console.log);

console.log(2);

// 1

// 2

// 3

async function foo() {

console.log(1);

return Promise.resolve(3);

}

// 给返回的期约添加一个解决处理程序

foo().then(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 (in promise): 3

await

await是异步函数的关键所在，await可以暂停异步函数的执行并等待期约解决。

async function foo() {

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));

console.log(await p);

}

foo();

// 3

await会暂停执行异步函数后面的代码，让出执行线程，这个行为和生成器函数中的yield关键字是一样的。await关键同样会将值传给表达式，再异步恢复异步函数的执行。await 关键字后面的不一定必须是期约。

async function foo() {

console.log(1)

console.log(await 3)

console.log(4)

}

foo()

console.log(2);

// 1 2 3 4

如果await等待的值或者期约是抛出错误或拒绝的期约，会将错误返回并且不会再继续执行后续：

async function foo() {

console.log(1);

await (() => {

throw 3;

})();

console.log(111)

}

// 给返回的期约添加一个拒绝处理程序

foo().catch(console.log);

console.log(2);

// 1

// 2

// 3

async function foo() {

console.log(1);

await Promise.reject(3);

console.log(4); // 这行代码不会执行

}

// 给返回的期约添加一个拒绝处理程序

foo().catch(console.log);

console.log(2);

// 1

// 2

// 3

await关键字必须在异步函数中使用，不能在顶级上下文如<script>标签或模块中使用。

停止和恢复执行

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

上述代码可以看出真正关键的其实是await，因为async只是个异步函数标识符，并且await后面的值对返回的时机也是关键的。

异步函数策略

sleep

JS中是没有类似JAVA的Thread.sleep()之类的非阻塞暂停，这一点可以通过异步函数实现。

async function sleep(delay) {

return new Promise((resolve) => setTimeout(resolve, delay));

}

async function foo() {

const t0 = Date.now();

await sleep(1500); // 暂停约 1500 毫秒

console.log(Date.now() - t0);

}

foo();

// 1502

利用平行执行

如果异步函数中有多个期约，但是返回的顺序不一定是必须要按照顺序的，可以实现平行加速。用法就是先初始化期约实例，在用await等待值。

先给一个不适用平行加速的例子：

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

// 1748ms elapsed

经过我多次执行发现每次的时间在1700 - 2600之间，但是如果使用平行加速：

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();

// 2 finished

// 4 finished

// 3 finished

// 0 finished

// awaited 0

// 1 finished

// awaited 1

// awaited 2

// awaited 3

// awaited 4

// 946ms elapsed

会快1秒左右，十分好用。

串行执行期约

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

栈追踪与内存管理

期约与异步函数的功能有相当程度的重叠，但它们在内存中的表示则差别很大。看看下面的例子，它展示了拒绝期约的栈追踪信息：

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

// async function (async)

// foo

这样一改，栈追踪信息就准确地反映了当前的调用栈。fooPromiseExecutor()已经返回，所以它不在错误信息中。但 foo()此时被挂起了，并没有退出。JavaScript 运行时可以简单地在嵌套函数中存储指向包含函数的指针，就跟对待同步函数调用栈一样。这个指针实际上存储在内存中，可用于在出错时生成栈追踪信息。这样就不会像之前的例子那样带来额外的消耗，因此在重视性能的应用中是可以优先考虑的。

原文：JavaScript高级程序设计(第四版)