Promise 的方式雖然解決了 callback hell，但是這種方式充滿了 Promise的 then() 方法，如果處理流程複雜的話，整段程式碼將充滿 then，程式碼流程不能很好的表示執行流程。

為什麼是async/await

在 es6 中，我們可以使用 Generator 函式控制流程，如下面這段程式碼：

1. function* foo(x){

2.    yield x +1;

3.    yield x +2;

4. return x +3;

5. }

我們可以根據不斷地呼叫 Generator 物件的 next()方法來控制函式的流程。但是這樣彷彿不是那麼的語義化。因此，在 ES6 中封裝了 Generator 函式的語法糖 async 函式，但是將其定義在了 es7 中。ES7 定義出的 async

那麼，我們通過一段小小的程式碼來說明 async/await 函式的用法：

未使用 async/await 的定時函式：

1. fn =()=>{

2. returnnewPromise((resolve, reject)=>{

3.    setTimeout(()=>{

4.      resolve(1)

5. },2000)

6. })

7. }

8. constFn=()=>{

9.  fn().then((res)=>{

10.    console.log(res)

11. })

12.  console.log(2)

13. }

14. Fn()

我相信能看到這裡的各位程式設計師大佬應該都知道這段程式碼的輸出狀況：先列印 2，2s 之後打印出 1。

使用 async/await 的定時函式：

1. fn =()=>{

2. returnnewPromise((resolve, reject)=>{

3.    setTimeout(()=>{

4.      resolve(1)

5. },2000)

6. })

7. }

8. constFn= async ()=>{

9.  await fn().then((res)=>{

10.    console.log(res)

11. })

12. }

13. Fn()

14. console.log(2)

這一段函式的輸出狀況是：2s 後列印 1，然後列印 2。

那麼，why？

　　我們在字面上理解這兩個單詞 async 和 await：async 的意思是非同步，async 用於定義一個非同步函式，該函式返回一個 Promise。；await 的意思是等待，Promise 是一個承諾，await 也是一個承諾。Promise 的承諾是將返回值輸出到 then 的回掉函式裡面，無論是成功還是失敗。await 的承諾是無論颳風還是下雨，我都會等你完成在做其他的步驟。因此，在上面的運用了 async/await 的程式碼中，會等待 fn 完全執行完成並且非同步的回撥完成對返回值的處理之後在開始進行下一步操作的。其原理是將非同步函式轉變為同步操作。

實際運用

在上週的工作中，我在一段基於 node 完成的爬蟲操作中多次運用 async/await 來控制程式的執行流程：

1. //虛擬碼

2. let axiosArr =[];

3. for(let i =0, len = arr.length; i < len; i++){

4.  let params = qs.stringify({

5. 'param': arr[i].index,

6. })

7.  axiosArr.push(axios.post(url, params,{

8.    headers

9. }))

10. }

11. /*

12. *上面的迴圈是迴圈抓取2345條資料，平均每個資料要訪問16個介面

13. *用axios.all同時詢問，當返回結束後將返回值處理

14. *然後將返回值儲存到mongodb資料庫中

15. */

16. await axios.all(axiosArr).then(

17.  axios.spread(function(){

18. for(let i =0, len = arguments.length; i < len; i++){

19.      let str =`${unescape(arguments[i].data.replace(/\\u/g,'%u'))}`;

20.      str = basics.subStr(basics.deletN(basics.deletS(basics.cutStr(str))));

21.      concentArr[i].concent = str

22. }

23.    mg.mongodbMain({

24.      name: obj.name,

25.      alias: obj.alias,

26.      type: type,

27.      url: obj.url,

28.      drugsConcent: concentArr

29. })

30. }))

其實操作就這麼點，大家看一下程式碼都會懂。但是問題是，當我不使用 async/await 時，會產生的情況是會先訪問 2000 + 個數據，不斷訪問其 16 個介面，但是由於 promise 的 then 的回撥函式為非同步的，會掛起，而不是直接將資料存到資料庫中。這貌似和我們預想的不一樣啊。因此，我在這裡使用了 async/await 函式，使用同步處理非同步操作，將 promise 同步化，當 axios.all 訪問完成這每一條資料的 16 個介面後，直接將資料儲存到資料庫中，然後才會走到迴圈的下一層，依舊是訪問下一條資料的 16 個介面。

async/await 的身後事

我們說過了 async 函式返回值是 Promise 物件。

1. const delay = timeout =>newPromise(resolve=> setTimeout(resolve, timeout));

2. async function f(){

3.    await delay(1000);

4.    await delay(2000);

5.    await delay(3000);

6. return'done';

7. }

8. f().then(v => console.log(v));// 6s之後列印'done'

那麼其內部一旦丟擲異常，則會導致返回的 Promise 物件狀態變為 reject 狀態。丟擲的錯誤而會被 catch 方法回撥函式接收到。

1. async function e(){

2. thrownewError('error');

3. }

4. e().then(v => console.log(v))

5. .catch( e => console.log(e));//丟擲的錯誤會被catch捕捉到

並且，async 有一個和 promise.all 相似的特性，就是內部一點有一個 await 函式報錯，後續的就不再執行了

1. let fn1 =()=>{

2. returnnewPromise((resolve,reject)=>{

3.        setTimeout(()=>{

4.            reject('故意丟擲錯誤');

5. },500);

6. });

7. }

8. let fn2 =()=>{

9. returnnewPromise((resolve,reject)=>{

10.        setTimeout(()=>{

11.            resolve(1);

12. },500);

13. });

14. }

15. let getList = async ()=>{

16.    let a = await fn1();

17.    let b = await fn2();

18. return{first: a,second:b};

19. }

20. getList().then(result=>{

21.    console.log(result);

22. }).catch(err=>{

23.    console.log(err);// 由於fn1的報錯，async的狀態直接變成了rejected

24. });

當 Promise 出現的時候，我們彷彿看到了回撥地獄的滅亡。當 Async/Await 出現時，非同步終於不是一件困難的事情。