Async：简洁优雅的异步之道

jiezi

6 年前

前言
在异步处理方案中，目前最为简洁优雅的便是 async 函数（以下简称 A 函数）。经过必要的分块包装后，A 函数能使多个相关的异步操作如同同步操作一样聚合起来，使其相互间的关系更为清晰、过程更为简洁、调试更为方便。它本质是 Generator 函数的语法糖，通俗的说法是使用 G 函数进行异步处理的增强版。
尝试
学习 A 函数必须有 Promise 基础，最好还了解 Generator 函数，有需要的可查看延伸小节。
为了直观的感受 A 函数的魅力，下面使用 Promise 和 A 函数进行了相同的异步操作。该异步的目的是获取用户的留言列表，需要分页，分页由后台控制。具体的操作是：先获取到留言的总条数，再更正当前需要显示的页数（每次切换到不同页时，总数目可能会发生变化），最后传递参数并获取到相应的数据。
let totalNum = 0; // Total comments number.
let curPage = 1; // Current page index.
let pageSize = 10; // The number of comment displayed in one page.

// 使用 A 函数的主代码。
async function dealWithAsync() {
totalNum = await getListCount();
console.log(‘Get count’, totalNum);
if (pageSize * (curPage – 1) > totalNum) {
curPage = 1;
}

return getListData();
}

// 使用 Promise 的主代码。
function dealWithPromise() {
return new Promise((resolve, reject) => {
getListCount().then(res => {
totalNum = res;
console.log(‘Get count’, res);
if (pageSize * (curPage – 1) > totalNum) {
curPage = 1;
}

return getListData()
}).then(resolve).catch(reject);
});
}

// 开始执行 dealWithAsync 函数。
// dealWithAsync().then(res => {
// console.log(‘Get Data’, res)
// }).catch(err => {
// console.log(err);
// });

// 开始执行 dealWithPromise 函数。
// dealWithPromise().then(res => {
// console.log(‘Get Data’, res)
// }).catch(err => {
// console.log(err);
// });

function getListCount() {
return createPromise(100).catch(() => {
throw ‘Get list count error’;
});
}

function getListData() {
return createPromise([], {
curPage: curPage,
pageSize: pageSize,
}).catch(() => {
throw ‘Get list data error’;
});
}

// 表达式
let A = async function () {};

// 作为对象属性
let o = {
A: async function () {}
};

// 作为对象属性的简写式
let o = {
async A() {}
};

// 箭头函数
let o = {
A: async () => {}
};
1.2 返回值
执行 A 函数，会固定的返回一个 Promise 对象。
得到该对象后便可监设置成功或失败时的回调函数进行监听。如果函数执行顺利并结束，返回的 P 对象的状态会从等待转变成成功，并输出 return 命令的返回结果（没有则为 undefined）。如果函数执行途中失败，JS 会认为 A 函数已经完成执行，返回的 P 对象的状态会从等待转变成失败，并输出错误信息。
// 成功执行案例

A1().then(res => {
console.log(‘ 执行成功 ’, res); // 10
});

async function A1() {
let n = 1 * 10;
return n;
}

// 失败执行案例

A2().catch(err => {
console.log(‘ 执行失败 ’, err); // i is not defined.
});

async function A2() {
let n = 1 * i;
return n;
}
1.3 await
只有在 A 函数内部才可以使用 await 命令，存在于 A 函数内部的普通函数也不行。
引擎会统一将 await 后面的跟随值视为一个 Promise，对于不是 Promise 对象的值会调用 Promise.resolve() 进行转化。即便此值为一个 Error 实例，经过转化后，引擎依然视其为一个成功的 Promise，其数据为 Error 的实例。
当函数执行到 await 命令时，会暂停执行并等待其后的 Promise 结束。如果该 P 对象最终成功，则会返回成功的返回值，相当将 await xxx 替换成返回值。如果该 P 对象最终失败，且错误没有被捕获，引擎会直接停止执行 A 函数并将其返回对象的状态更改为失败，输出错误信息。
最后，A 函数中的 return x 表达式，相当于 return await x 的简写。
// 成功执行案例

A1().then(res => {
console.log(‘ 执行成功 ’, res); // 约两秒后输出 100。
});

async function A1() {
let n1 = await 10;
let n2 = await new Promise(resolve => {
setTimeout(() => {
resolve(10);
}, 2000);
});
return n1 * n2;
}

// 失败执行案例

A2().catch(err => {
console.log(‘ 执行失败 ’, err); // 约两秒后输出 10。
});

async function A2() {
let n1 = await 10;
let n2 = await new Promise((resolve, reject) => {
setTimeout(() => {
reject(10);
}, 2000);
});
return n1 * n2;
}
2 入室
2.1 继发与并发
对于存在于 JS 语句（for, while 等）的 await 命令，引擎遇到时也会暂停执行。这意味着可以直接使用循环语句处理多个异步。
以下是处理继发的两个例子。A 函数处理相继发生的异步尤为简洁，整体上与同步代码无异。
// 两个方法 A1 和 A2 的行为结果相同，都是每隔一秒输出 10，输出三次。

async function A1() {
let n1 = await createPromise();
console.log(‘N1’, n1);
let n2 = await createPromise();
console.log(‘N2’, n2);
let n3 = await createPromise();
console.log(‘N3’, n3);
}

async function A2() {
for (let i = 0; i< 3; i++) {
let n = await createPromise();
console.log(‘N’ + (i + 1), n);
}
}

async function A1() {
let res = await Promise.all([createPromise(), createPromise(), createPromise()]);
console.log(‘Data’, res);
}

async function A2() {
let res = [];
let reqs = [createPromise(), createPromise(), createPromise()];
for (let i = 0; i< reqs.length; i++) {
res[i] = await reqs[i];
}
console.log(‘Data’, res);
}

async function A3() {
let res = [];
let reqs = [9, 9, 9].map(async (item) => {
let n = await createPromise(item);
return n + 1;
});
for (let i = 0; i< reqs.length; i++) {
res[i] = await reqs[i];
}
console.log(‘Data’, res);
}

async function A1() {
let n;
n = await createPromise(true);
return n;
}

async function A2() {
let n;
try {
n = await createPromise(false);
} catch (e) {
n = e;
}
return n;
}

// A 函数
async function request() {
let n = await createPromise();
}

// A 函数
A();

async function A() {
let n1 = await createPromise();
console.log(n1);
let n2 = await createPromise();
console.log(n2);
}

// G 函数，使用自执行器执行。
spawn(G);

function* G() {
let n1 = yield createPromise();
console.log(n1);
let n2 = yield createPromise();
console.log(n2);
}

function createPromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(10);
}, 1000);
});
}
延伸
ES6 精华：Promise Generator：JS 执行权的真实操作者