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

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

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

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

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

但是這也說明了一個(gè)問題

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

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

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

我們可以給script標(biāo)簽添加 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

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

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

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

先看看async函數(shù)如何實(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 了，因?yàn)?async 自帶執(zhí)行器。

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

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

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

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

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

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

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

所以我們最后羅列一下使用async時(shí)需要注意的點(diǎn)

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

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

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

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

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

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

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

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