理解async await的原理

了解過了promise之後，就不得不提乙個東西，那就是async/await，async/await是乙個很重要的語法糖，他的作用是用同步的方式，執行非同步操作。

要實現乙個東西之前，最好是先搞清楚這兩樣東西

一、有什麼用？

async/await的用處就是：用同步方式，執行非同步操作，怎麼說呢？舉個例子

比如我現在有乙個需求：先請求完介面1，再去請求介面2，我們通常會這麼做

function request(num) , 1000)
})}request(1).then(res1 => )
})

或者我現在又有乙個需求：先請求完介面1，再拿介面1返回的資料，去當做介面2的請求引數，那我們也可以這麼做

request(5).then(res1 => )
})

其實這麼做是沒問題，但是如果巢狀的多，不免有點**觀，可讀性維護性不高，**顯得也很臃腫，這個時候就可以用async/await來解決了

async function fn () 
fn()

二、怎麼用?

還是上面的例子

//需求一
async function fn () 
fn()
//需求二
async function fn () 
fn()

就類似於生活中的排隊，咱們生活中排隊買東西，肯定是要上乙個人買完，才輪到下乙個人。而上面也一樣，在async函式中，await規定了非同步操作只能乙個乙個排隊執行，從而達到用同步方式，執行非同步操作的效果

注意：await只能在async函式中使用，不然會報錯

剛剛上面的例子await後面都是跟著非同步操作promise，那如果不接promise會怎麼樣呢？

function request(num) , 1000)
}async function fn() 
fn()

可以看出，如果await後面接的不是promise的話，有可能其實是達不到排隊的效果的

說完await，繼續看下async，async是乙個位於function之前的字首，只有async函式中，才能使用await。那async執行完是返回乙個什麼呢？

async function fn () {}
console.log(fn) // [asyncfunction: fn]
console.log(fn()) // promise

可以看出，async函式執行完會自動返回乙個狀態為fulfilled的promise，也就是成功狀態，但是值卻是undefined，怎麼才能使值不是undefined呢？需要函式有return返回值就行了

async function fn (num) 
console.log(fn) // [asyncfunction: fn]
console.log(fn(10)) // promise 
fn(10).then(res => console.log(res)) // 10

此時就有值了，並且還能使用then方法進行輸出

三、總結

四、什麼是語法糖?

前面說了，async/await是一種語法糖，啥是語法糖呢？其實語法糖就是乙個東西，這個東西你就算不用他，你用其他手段也能達到這個東西同樣的效果，但是可能就沒有這個東西這麼方便。

舉個生活中的例子吧：你走路也能走到北京，但是你坐飛機會更快到北京。

舉個**中的例子吧：es6的class也是語法糖，因為其實用普通function也能實現同樣效果

回歸正題，async/await是一種語法糖，那就說明用其他方式其實也可以實現他的效果，我們今天就是講一講怎麼去實現async/await，用到的是es6裡的迭代函式——generator函式