本文實例講述了JS async 函數(shù)的含義和用法。分享給大家供大家參考，具體如下：

學(xué)習老師最后一篇文章并做總結(jié)，

前面我們認識了各種異步編程方式：回調(diào)函數(shù)，Promise對象，Generator函數(shù)，

再到兩種自動執(zhí)行方式：Thunk，co

好像我們?yōu)榱烁玫慕鉀Q異步編程做了很多事情，

但是這也說明了一個問題

就是目前仍是的異步編程都有或多或少的問題，才導(dǎo)致我們要找對應(yīng)的解決方案

今天我們?nèi)允亲詈蟮拇笳校篴sync

這個關(guān)鍵字在哪里見到來著？

我們可以給script標簽添加 async 屬性來異步執(zhí)行腳本。

ajax 可以通過配置 async 來設(shè)置同步/異步請求

今天我們?nèi)允且环N新的使用方式: async 函數(shù)

還是參考前面讀取文件的例子：

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

這兩種方式需要引入單獨的模塊，來實現(xiàn)自動執(zhí)行器。

并且對 yield 的返回結(jié)果有嚴格要求。

async 函數(shù)很好的解決了這個問題。

先看看async函數(shù)如何實現(xiàn)上面的代碼：

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 自帶執(zhí)行器。

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

如果是 Promise 對象就異步處理，原始類型則同步處理

最復(fù)雜的兩處代碼 async 都幫我們實現(xiàn)了。

但是萬變不離其宗，再怎么改變，其實內(nèi)里還是一樣的

async 函數(shù)其實是將前文里的 Generator 函數(shù)和自動執(zhí)行函數(shù)包裝在一塊

只是減少了我們使用上的復(fù)雜度，實際的邏輯一點沒少。

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

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

await 命令后面的Promise對象可能拋出異常，所以最好catch一下異常 await 命令只能用在async函數(shù)內(nèi)部，用在其他位置會報錯 可以使用Promise.all將任務(wù)并發(fā)執(zhí)行

至此，老師的異步編程四部曲就學(xué)習完了。

再次聲明，本博客內(nèi)的文章只適用個人學(xué)習使用，不允許任何形式的轉(zhuǎn)載，

如需轉(zhuǎn)載，請移步阮一峰老師的博客。

最后附上原文地址：async 函數(shù)的含義和用法

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。