一、前言
實際上對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