本文例項講述了JS async 函式的含義和用法。分享給大家供大家參考，具體如下：

學習老師最後一篇文章並做總結，

前面我們認識了各種非同步程式設計方式：回撥函式，Promise物件，Generator函式，

再到兩種自動執行方式：Thunk，co

好像我們為了更好的解決非同步程式設計做了很多事情，

但是這也說明了一個問題

就是目前仍是的非同步程式設計都有或多或少的問題，才導致我們要找對應的解決方案

今天我們仍是最後的大招：async

這個關鍵字在哪裡見到來著？

我們可以給script標籤新增 async 屬性來非同步執行指令碼。

ajax 可以通過配置 async 來設定同步/非同步請求

今天我們仍是一種新的使用方式: async 函式

還是參考前面讀取檔案的例子：

var gen = function* (){
 var f1 = yield readFile('/etc/fstab');
 var f2 = yield readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

我們對他做了兩種解決方案,Thunk 和 co

這兩種方式需要引入單獨的模組，來實現自動執行器。

並且對 yield 的返回結果有嚴格要求。

async 函式很好的解決了這個問題。

先看看async函式如何實現上面的程式碼：

var asyncReadFile = async function (){
 var f1 = await readFile('/etc/fstab');
 var f2 = await readFile('/etc/shells');
 console.log(f1.toString());
 console.log(f2.toString());
};

把之前的 * 替換成了 async ，yield 替換成了 await，僅此而已

我們不需要在去寫 Thunk 和 co 了，因為 async 自帶執行器。

我們也不需要去限制 await 後面的返回值，因為 async 會自己識別，

如果是 Promise 物件就非同步處理，原始型別則同步處理

最複雜的兩處程式碼 async 都幫我們實現了。

但是萬變不離其宗，再怎麼改變，其實內裡還是一樣的

async 函式其實是將前文裡的 Generator 函式和自動執行函式包裝在一塊

只是減少了我們使用上的複雜度，實際的邏輯一點沒少。

使用方式也和之前 co 的使用方式類似。

所以我們最後羅列一下使用async時需要注意的點

1. await 命令後面的Promise物件可能丟擲異常，所以最好catch一下異常
2. await 命令只能用在async函式內部，用在其他位置會報錯
3. 可以使用Promise.all將任務併發執行

至此，老師的非同步程式設計四部曲就學習完了。

再次宣告，本部落格內的文章只適用個人學習使用，不允許任何形式的轉載，

如需轉載，請移步阮一峰老師的部落格。

最後附上原文地址：async 函式的含義和用法

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。