JS async 函數(shù)的含義和用法實(shí)例總結(jié)

更新時(shí)間：2020年04月08日 10:10:03 作者：李小強(qiáng)

這篇文章主要介紹了JS async 函數(shù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS async 函數(shù)的基本功能、含義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

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

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

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

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

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

但是這也說(shuō)明了一個(gè)問(wèn)題

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

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

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

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

ajax 可以通過(guò)配置 async 來(lái)設(shè)置同步/異步請(qǐng)求

今天我們?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());
};

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

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

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

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

先看看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 會(huì)自己識(shí)別，

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

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

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

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

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

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

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