异步编程新方式async/await
一、前言
实际上对async/await并不是很陌生，早在阮大大的ES6教程里面就接触到了，但是一直处于理解并不熟练使用的状态，于是决定重新学习并且总结一下，写了这篇博文。如果文中有错误的地方还请各位批评指正！
二、介绍async/await
1.async/await 是异步代码的新方式
2.async/await 基于 Promise 实现
3.async/await使得异步代码更像同步代码
4.await 只能用在 async 函数中，不能用在普通函数中 await 关键字后面必须跟 Promise 对象 函数执行到 await 后，Promise 函数执行完毕，但因为 Promise 内部一般都是异步函数，所以事件循环会一直 等待，直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容
三、特点
async函数ES2017标准引入的语法，是Generator函数的语法糖，因此其相对于Generator函数，具有以下基本特点。
内置执行器： 使用async函数可以像使用普通函数一样，直接调用即可执行。不用像Generator函数一样使用co模块来实现流程控制。
语义化更强： async关键字表示是一个异步的函数，await表示需要等待执行。相对于yield表达式，语义化更强。
返回值是Promise： async函数返回值是Promise对象，这比Generator函数的返回值是Iterator对象方便多了，可以使用then方法来指定下一步的操作。
四、基本用法
1.async函数的返回值
async函数返回一个 Promise 对象，async函数内部return语句返回的值，会成为then方法回调函数的参数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。
async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function f() {
throw new Error('出错了');
}
f().then(
v => console.log('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出错了
2.Promise的状态变化
async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"
上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。
3.await命令
如果await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
如果await命令后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。
class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
}
(async () => {
const sleepTime = await new Sleep(1000);
console.log(sleepTime);
})();
// 1000
如果await命令后面的 Promise 对象变为reject状态，则reject的参数会被catch方法的回调函数接收到。
async function f() {
await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
为了避免一些不必要的麻烦，建议把await放入try—catch中
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一种写法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
4.总结
（1）async函数内部的异步操作执行完，根据其执行的状态，对应执行then或catch
（2）遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
（3）任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
五、实现原理
async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。【Generator可以理解为一个状态机，内部封装了很多状态，同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。 Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。】
async function fn(args) {
// ...
}
// 等同于
function fn(args) {
return spawn(function* () {
// ...
});
}
所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。下面给出spawn函数的实现
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(undefined); });
});
}
六、注意事项
1.await只能使用在async函数内部，在普通函数中使用会报错
2.任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。最好将其放入try—catch中
3.在某些场景下并不适合使用await，会增加页面交互时间，要合理利用
参考文档：https://es6.ruanyifeng.com/#docs/async
http://www.vsoui.com/2018/06/07/async-await-function/
https://blog.csdn.net/juhaotian/article/details/78934097