詳細介紹JavaScript異步函數(shù)發(fā)展歷程代碼示例

上面描述的場景正是JavaScript生成器函數(shù)所致力于解決的問題。當我們調(diào)用一個生成器函數(shù)的時候，它并不會立即執(zhí)行， 而是需要我們手動的去執(zhí)行迭代操作（next方法）。也就是說，你調(diào)用生成器函數(shù)，它會返回給你一個迭代器。迭代器會遍歷每個中斷點。

function* foo () { 
 var index = 0; 
 while (index < 2) { 
 yield index++; //暫停函數(shù)執(zhí)行，并執(zhí)行yield后的操作 
 } 
} 
var bar = foo(); // 返回的其實是一個迭代器 

console.log(bar.next()); // { value: 0, done: false } 
console.log(bar.next()); // { value: 1, done: false } 
console.log(bar.next()); // { value: undefined, done: true }

更進一步的，如果你想更輕松的使用生成器函數(shù)來編寫異步JavaScript代碼，我們可以使用 co 這個庫，co是著名的tj大神寫的。

Co是一個為Node.js和瀏覽器打造的基于生成器的流程控制工具，借助于Promise，你可以使用更加優(yōu)雅的方式編寫非阻塞代碼。

使用co，前面的示例代碼，我們可以使用下面的代碼來改寫：

co(function* (){ 
 yield Something.save(); 
}).then(function() { 
 // success 
}) 
.catch(function(err) { 
 //error handling 
});

你可能會問：如何實現(xiàn)并行操作呢？答案可能比你想象的簡單，如下（其實它就是Promise.all而已）：

yield [Something.save(), Otherthing.save()];

Async/ await

在ES7（還未正式標準化）中引入了Async函數(shù)的概念，目前如果你想要使用的話，只能借助于babel 這樣的語法轉(zhuǎn)換器將其轉(zhuǎn)為ES5代碼。（提醒一點：我們現(xiàn)在討論的是async關(guān)鍵字，而不是NPM中的async包）。

簡而言之，使用async關(guān)鍵字，你可以輕松地達成之前使用生成器和co函數(shù)所做到的工作。當然，除了hack之外。

也許你會問，是否在ES7中有了async關(guān)鍵字，yield就變得不是那么重要了？

實際上，使用yield實現(xiàn)異步也不過是一種hack罷了，yield意味著懶次序（lazy sequences）和迭代器。 而await能夠完美的分離這兩點，首先讓yield用于其最初的目的，其次使用await來執(zhí)行異步操作。

在這背后，async函數(shù)實際使用的是Promise，也就是為什么async函數(shù)會返回一個Promise的原因。

因此，我們使用async函數(shù)來完成類似于前面代碼所完成的工作，可以使用下面這樣的方式來重新編寫代碼：

async function save(Something) { 
 try { 
 await Something.save(); // 等待await后面的代碼執(zhí)行完，類似于yield 
 } catch (ex) { 
 //error handling 
 } 
 console.log('success'); 
}

正如你看到的那樣，使用async函數(shù)，你需要在函數(shù)聲明的最前面加上async關(guān)鍵字。這之后，你可以在函數(shù)內(nèi)部使用await關(guān)鍵字了，作用和之前的yield作用是類似的。

使用async函數(shù)完成并行任務(wù)與yiled的方式非常的相似，唯一不同的是，此時Promise.all不再是隱式的，你需要顯示的調(diào)用它：

async function save(Something) { 
 await Promise.all[Something.save(), Otherthing.save()] 
}

Koa也支持async函數(shù)，如果你也在使用koa，那么你現(xiàn)在就可以借助babel使用這一特性了。

import koa from koa; 
let app = koa(); 

app.experimental = true; 

app.use(async function (){ 
 this.body = await Promise.resolve('Hello Reader!') 
}) 

app.listen(3000);

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com