媒介
這篇文章主假如梳理一下本身對阮一峰大神寫的關於async/await文章，有寫得不對的處所以及明白得不對的處所，列位大佬請指錯！
對照
簡樸對照傳統異步，promise異步，async異步
下文都邑以setTimeout來舉行異步展現，輕易明白。
傳統的回調
setTimeout(callback,1000);
function callback(){
console.log("拿到效果了！");
}setTimeout函數傳入了兩個參數(1000/callback)，setTimeout被挪用的時刻，主線程不會守候1秒，而是先實行別的使命。callback這個函數就是一個回調函數，即當1秒后，主線程會從新挪用callback（這裏也不再煩瑣去說event Loop方面的學問了）；
那末，當我們異步函數須要嵌套的時刻呢。比方這類狀況：
setTimeout(function(){
console.log("第一個異步回調了！")
setTimeout(function(){
console.log("第二個異步回調了！")
setTimeout(function(){
console.log("第三個異步回調了！")
setTimeout(function(){
console.log("第四個異步回調了！")
setTimeout(function(){
console.log("第五個異步回調了！")
},1000);
},1000);
},1000);
},1000);
},1000);OK，想死不？
我們用promise來處置懲罰
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
timeout(2000)
.then(value => {
console.log("第一層" + value);
return timeout(2000);
})
.then(value => {
console.log("第二層" + value);
return timeout(2000);
})
.then(value => {
console.log("第三層" + value);
return timeout(2000);
})
.then(value => {
console.log("第四層" + value);
return timeout(2000);
})
.then(value => {
console.log("第五層" + value);
return timeout(2000);
})
.catch(err => {
console.log(err);
});OK，悅目點了！
然則照樣不輕易！
我們用async/await來處置懲罰：
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
async function asyncTimeSys(){
await timeout(1000);
console.log("第一層異步完畢！")
await timeout(1000);
console.log("第二層異步完畢！")
await timeout(1000);
console.log("第三層異步完畢！")
await timeout(1000);
console.log("第四層異步完畢！")
await timeout(1000);
console.log("第五層異步完畢！")
return "all finish";
}
asyncTimeSys().then((value)=>{
console.log(value);
});OK,舒服了！
在這個asyncTimeSys函數內里，一切的異步操縱，寫的跟同步函數沒有什麼兩樣！
async的原型
async函數終究是什麼？實在他就是Genarator函數（生成器函數）的語法糖罷了！
- 內置實行器。
Generator 函數的實行必需靠實行器，所以才有了co模塊，而async函數自帶實行器。也就是說，async函數的實行，與一般函數如出一轍。完整不像 Generator 函數，須要挪用next要領，或許用co模塊，才真正實行，獲得末了效果。
- 更好的語義。
async和await，比起星號和yield，語義更清晰了。async示意函數里有異步操縱，await示意緊跟在背面的表達式須要守候效果。
- 更廣的適用性。
co模塊商定，yield敕令背面只能是 Thunk 函數或 Promise 對象，而async函數的await敕令背面，可所以 Promise 對象和原始範例的值（數值、字符串和布爾值，但這時候等同於同步操縱）。
- 返回值是 Promise。
async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象輕易多了。你能夠用then要領指定下一步的操縱。
進一步說，async函數完整能夠看做多個異步操縱，包裝成的一個 Promise 對象，而await敕令就是內部then敕令的語法糖。
實在，async函數就是一個由Generator封裝的異步環境，其內部是經由過程交流函數實行權，以及thunk函數來完成的！
用Generator函數封裝異步要求
OK，我們簡樸的封裝一個：
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
function *times(){
let result =yield timeout(1000);
return "second next"
}
let gen = times(); //拿到生成器函數,gen能夠明白為指針
let firstYield = gen.next(); //firstYield此時為gen指針指向的第一個yield右側的表達式，此時timeout(1000)被實行
console.log(firstYield); // firstYield = {value:Pomise,done:false};
//接下來就是將firstYield中的value里的promise拿出來，作為一般的Promise挪用，以下：
firstYield.value.then(()=>{
//當timeout異步完畢以後，實行以下代碼，再將gen指針實行下一個yield，由於以下沒有yield了，所以gen.next()的value為return里的東西
console.log("timeout finish");
console.log(gen.next()); //{value: "second next", done: true}
}).catch((err)=>{
});如許封裝有什麼用呢，yield返回返來的東西，照樣得像promise那樣挪用。
我們先來看看同步的代碼，先讓它長得像async和await那模樣：
function* times() {
yield console.log(1);
yield console.log(2);
yield console.log(3);
return "second next";
}
let gen = times();
let result = gen.next();
while (!result.done) {
result = gen.next();
}OK，異常像了，然則，這是同步的。異步要求必需得比及第一個yield實行完成以後，才去實行第二個yield。我們假如改成異步，肯定會形成無窮輪迴。
那末，times生成器內里假如都是異步的話，我們應當怎樣挪用呢？
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
function *times(){
yield timeout(2000);
yield timeout(2000);
yield timeout(2000);
return "finish all!";
}
let gen = times();
let gen1 = gen.next();
gen1.value.then(function(data){
console.log(data+" one");
let gen2 = gen.next();
gen2.value.then(function(data){
console.log(data+" two");
let gen3 = gen.next();
gen3.value.then(function(data){
console.log(data+" three");
})
})
});
仔細觀察能夠發明，實在每個value的.then()要領都邑傳入一個雷同的回調函數，這意味着我們能夠運用遞返來流程化治理全部異步流程；
革新一下這個上邊的代碼；
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, "finish");
});
}
function* times() {
yield timeout(2000);
yield timeout(2000);
yield timeout(2000);
return "finish all!";
}
function run(fn){
let gen = fn();
function next(){
console.log("finish");
let result = gen.next();
if(result.done) return;
result.value.then(next);
}
next();
}
run(times);OK，如今我們能夠運用run函數，使得生成器函數times里的異步要求，一步接着一步往下實行。
那末，這個run函數裡邊的next終究是什麼呢，它實際上是一個thunk函數；
thunk函數
Thunk函數的降生是源於一個編譯器設想的題目：求值戰略，即函數的參數終究應當什麼時候求值。
看下邊的代碼，請思索什麼時刻舉行求值：
var x = 1;
function f(m) {
return m * 2;
}
f(x + 5);試問：x+5這個表達式應當什麼時刻求值
- 傳值挪用(call by value)，即在進入函數體之間，先盤算
x+5的值，再將這個值（6）傳入函數f，比方c言語，這類做法的優點是完成比較簡樸，然則有可能會形成機能喪失。 - 傳名挪用(call by name)，即直接將表達式(
x+5)傳入函數體，只在用到它的時刻求值。
OK，thunk函數終究是什麼：
編譯器的傳名挪用完成，每每就是將參數放到一個暫時函數當中，再將這個暫時函數轉入函數體，這個暫時函數就叫做Thunk函數。
將上邊的代碼舉行革新：
var thunk = function () {
return x + 5;
};
function f(thunk) {
return thunk() * 2;
}js中的傳名挪用是什麼呢，與真正的thunk有什麼區別呢?
JavaScript 言語是傳值挪用，它的 Thunk 函數寄義有所不同。在 JavaScript 言語中，Thunk 函數替代的不是表達式，而是多參數函數，將其替代成一個只吸收回調函數作為參數的單參數函數。
網上關於thunk的演示都是運用的fs模塊的readFile要領來舉行演示
// 一般版本的readFile（多參數版本）
fs.readFile(fileName, callback);
// Thunk版本的readFile（單參數版本）
var Thunk = function (fileName) {
return function (callback) {
return fs.readFile(fileName, callback);
};
};
var readFileThunk = Thunk(fileName);
readFileThunk(callback);實在，任何函數，只需參數有回調函數，就可以寫成Thunk函數的情勢。下面是一個簡樸的Thunk函數轉換器。
讓我們用setTimeout來舉行一次演示：
//一般版本的setTimeout;
setTimeout(function(data){
console.log(data);
},1000,"finish");
//thunk版本的setTimeout
let thunk = function(time){
return function(callback){
return setTimeout(callback,time,"finish");
}
}
let setTimeoutChunk = thunk(1000);
setTimeoutChunk(function(data){
console.log(data);
});如今轉頭看一看用Generator函數封裝異步要求這一節中末了一個實例中，我們封裝的timeout函數，他實在就是一個thunk函數，我在那一節中沒有給人人申明這一條：
- yield敕令背面的必需是 Thunk 函數。
為何Generator內里必需運用thunk函數呢，由於我們須要確保傳入的值只要一個，應用其回調函數，來舉行遞歸自動控制Generator函數的流程，吸收和交還順序的實行權;
