含义
async 函数是什么？一句话，它就是 Generator 函数的语法糖。
依次读取两个文件，可以写成async函数变得更像同步函数
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
- async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，并自带执行器。
- async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
- co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象
- async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
基本用法
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
多种场景下的写法：
// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = { async foo() {} };
// 箭头函数
const foo = async () => {};
语法
关于async函数的返回值问题
async函数返回一个 Promise 对象
async函数内部return语句返回的值，会成为返回的Promise对象的then方法回调函数的参数
async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行返回的Promise对象的then方法指定的回调函数。
关于await
await命令只能用在async函数之中，如果用在普通函数，就会报错
await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。
await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象。
可以通过await 完成简单的休眠的是实现
// 用法 每个1秒依次输出1到5
async function fn() {
for(let i = 1; i <= 5; i++) {
console.log(i);
await new Promise(resolve => {
setTimeout(resolve, 1000)
});
}
}
- await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被async函数返回的Promise实例的catch方法的回调函数接收到。
async function f() {
await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
- 任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。如果不想前一个await 的 Promise的中断执行影响后面的await的异步操作，可以这么写：
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
// 使用catch去捕获错误，这样就不会影响下一个awiat Promise的执行
// 也不会触发f()这个Promise实例的catch方法
// 捕获到错误了就不会中断执行 也不会改变实例的状态
}
return await Promise.resolve('hello world');
}
f()
.then(console.log) // 打印出 hello world
.catch(console.log) // 不会执行
// 也可以不使用try...catch块来捕获错误
// Promise.reject('出错了') 的返回值本身就是一个Promise
// 可以直接在后面链式调用catch方法来捕获错误，这样也不会影响后面代码的执行
// 如果有多个await命令，更推荐将所有的await统一放在try...catch结构中。
// 这样一个catch就能处理多个await 可能出现的错误
下面的例子使用try...catch结构，实现多次重复尝试
const superagent = require('superagent');
const NUM_RETRIES = 3;
async function test() {
let i;
for (i = 0; i < NUM_RETRIES; ++i) {
try {
await superagent.get('http://google.com/this-throws-an-error');
// 如果一次成功就直接跳出循环
// 如果发生错误了 就会跳过break 直接执行catch
// 然后再次进入循环 再次发起请求
// NUM_RETRIES 定义了这个重复尝试的次数
// 如果愿意 可以设置循环条件达到直到请求成功再跳出循环的目的
break;
} catch(err) {}
}
console.log(i); // 3
}
test();
- 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
// 如果在async函数中这样写 这两个异步操作 getBar会等到getFoo执行完成后执行
// 如果 getBar 与 getFoo 并不存在继发方式，这无疑会影响性能
// 如果不存在继发关系，最好让它们同时触发
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo(); // 这样写也是一样 因为异步操作被同时启动了
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
- async 函数可以保留运行堆栈
const a = () => {
var num = 1
Promise.resolve().then(() => console.log(x)); // 报错
console.log(num+1); // 2
};
a()
// 先输出2 再报错 错误堆栈不包过a()
函数a内部运行了一个异步任务。当异步任务运行的时候，函数a()不会中断，而是继续执行。等到b()运行结束，可能a()早就运行结束了，b()所在的上下文环境已经消失了。如果b()或c()报错，错误堆栈将不包括a()。
可以改为async函数
const a = async () => {
await Promise.resolve().then(() => console.log(x)); // 报错;
console.log(num+1); // 不会执行
};
// 直接报错 错误堆栈包括a()
async 函数的实现原理
async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
// spawn函数就是自动执行器
return spawn(function* () {
// ...
});
}
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(); });
});
}
与其他异步处理方法的比较
async 函数的实现最简洁，最符合语义，几乎没有语义不相关的代码。它将 Generator 写法中的自动执行器，改在语言层面提供，不暴露给用户，因此代码量最少。如果使用 Generator 写法，自动执行器需要用户自己提供。
假定某个 DOM 元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for(let anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略错误，继续执行 */
// 上面的await 后面的表达式发生错误 就会进入catch块
// 就不会继续进行循环 从而执行下面的return 返回上一个成功执行的返回值
}
return ret;
}
按顺序完成异步操作
场景：依次远程读取一组 URL，然后按照读取的顺序输出结果。
// Promise的写法
function logInOrder(urls) {
// 远程读取所有URL
const textPromises = urls.map(url => {
return fetch(url).then(response => response.text());
});
// 按次序输出
textPromises.reduce((chain, textPromise) => {
return chain.then(() => textPromise)
.then(text => console.log(text));
}, Promise.resolve());
}
// async 函数实现
async function logInOrder(urls) {
for (const url of urls) {
const response = await fetch(url);
console.log(await response.text());
}
}
// 上面代码确实大大简化，问题是所有远程操作都是继发。
// 只有前一个 URL 返回结果，才会去读取下一个 URL
async function logInOrder(urls) {
// 并发读取远程URL
//
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
});
// 按次序输出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}
虽然map方法的参数是async函数，但它是并发执行的，因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出
顶层 await
目前，有一个语法提案，允许在模块的顶层独立使用await命令。这个提案的目的，是借用await解决模块异步加载的问题。
// awaiting.js
let output;
(async function main() {
const dynamic = await import(someMission);
const data = await fetch(url);
output = someProcess(dynamic.default, data);
})();
export { output };
模块awaiting.js的输出值output，取决于异步操作。我们把异步操作包装在一个 async 函数里面，然后调用这个函数，只有等里面的异步操作都执行，变量output才会有值，否则就返回undefined。
下面是加载这个模块的写法：
// usage.js
import { output } from "./awaiting.js";
function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100)); // NaN
setTimeout(() => console.log(outputPlusValue(100)), 1000); // 可能会正常输出
// outputPlusValue()的执行结果，完全取决于执行的时间。如果awaiting.js里面的异步操作没执行完，加载进来的output的值就是undefined
目前的解决方法，就是让原始模块输出一个 Promise 对象，从这个 Promise 对象判断异步操作有没有结束。
// awaiting.js
let output;
export default (async function main() {
const dynamic = await import(someMission);
const data = await fetch(url);
output = someProcess(dynamic.default, data);
})();
export { output };
// usage.js
import promise, { output } from "./awaiting.js";
function outputPlusValue(value) { return output + value }
promise.then(() => {
// promise的then函数执行的时候 说明output已经有值了
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100)), 1000);
});
这种写法比较麻烦，等于要求模块的使用者遵守一个额外的使用协议，按照特殊的方法使用这个模块。一旦你忘了要用 Promise 加载，只使用正常的加载方法，依赖这个模块的代码就可能出错。而且，如果上面的usage.js又有对外的输出，等于这个依赖链的所有模块都要使用 Promise 加载。
顶层的await命令，就是为了解决这个问题。它保证只有异步操作完成，模块才会输出值。
// awaiting.js
const dynamic = import(someMission);
const data = fetch(url);
export const output = someProcess((await dynamic).default, await data);
// 两个异步操作在输出的时候，都加上了await命令。只有等到异步操作完成，这个模块才会输出值。
// usage.js
import { output } from "./awaiting.js";
function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);
上面代码的写法，与普通的模块加载完全一样。也就是说，模块的使用者完全不用关心，依赖模块的内部有没有异步操作，正常加载即可。
这时，模块的加载会import的时候就会等待依赖模块（上例是awaiting.js）的异步操作完成，才执行后面的代码，有点像暂停在那里。所以，它总是会得到正确的output，不会因为加载时机的不同，而得到不一样的值。
下面是顶层await的一些使用场景。
// import() 方法加载
const strings = await import(`/i18n/${navigator.language}`);
// 数据库操作
const connection = await dbConnector();
// 依赖回滚
let jQuery;
try {
jQuery = await import('https://cdn-a.com/jQuery');
} catch {
jQuery = await import('https://cdn-b.com/jQuery');
}
注意，如果加载多个包含顶层await命令的模块，加载命令是同步执行的。
// x.js
console.log("X1");
await new Promise(r => setTimeout(r, 1000));
console.log("X2");
// y.js
console.log("Y");
// z.js
import "./x.js";
import "./y.js";
console.log("Z");
打印结果是X1、Y、X2、Z。这说明，z.js并没有等待x.js加载完成，再去加载y.js。加载命令是同步执行的。
顶层的await命令有点像，交出代码的执行权给其他的模块加载，等异步操作完成后，再拿回执行权，继续向下执行。
