Promise和Generato中如何用同步方法寫異步JavaScript

這篇文章給大家介紹Promise和Generato中如何用同步方法寫異步JavaScript，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

最近在寫一個自己的網站的時候(可以觀摩一下~Colors)，在無意識中用callback寫了一段嵌套了5重回調函數的可怕的代碼。回過神來的時候被自己嚇了一跳，這可不行啊，丑得沒法看啊!于是打算嘗試一下一些流行的異步的解決方案。經過一番折騰之后...我終于找到了一個令自己滿意的方案了(愛不釋手)。

1. JavaScript異步解決方案有哪一些

其實異步JavaScript已經不是什么高級的東西了，Nodejs的出現，特別是callback  hell令人恐懼的寫法已經成功倒逼出了很多很棒的解決方案。在這里看尤雨溪大神的這篇小短文，非常精簡扼要地介紹了當前常用的async.js, Promise,  co, async/await。個人建議有機會可以都試一下看看。而從個人的角度，我可能會以以下的標準來選擇(個人喜好)：

需要寫爬蟲之類控制并發數的我會用async.js;它的有一些API還是很方便的。

寫前端的代碼的時候可能會比較傾向于考慮Promise，因為一般來說前端的異步場景除了ajax之外貌似也不是很多了。而且之前使用過isomorphic-fetch，感覺很棒。

后端代碼nodejs，那就非co莫屬了。根據尤雨溪大神的說法，es7的async/await也只是Promise &  Generator的語法糖而已。而co，就是結合了Promise和Generator的神一般的庫。而本篇文章主要就是講co結合Promise和Generator的異步解決方法。

2. Promise & Generator簡單入門

ES6是個好東西，其中的Promise和Generator可以說是精華的部分之一了。下面簡單介紹入門一下Promise以及Generator。這一小節的介紹會很簡單，而且也只是這兩個新特性的一部分，但是提到的點都是本篇文章所需要的。當然，從學習的角度，應該找書去完全了解一下這兩個特性，起碼有個印象吧~個人感覺ES6的學習可以去讀NCZ的Understanding  ECMAScript6或者阮一峰大神的ES6標準入門，都有電子書，很棒!前者語言比較淺顯易懂，生動有趣，后者會更加詳細，有條理一些。如果您已經對這些特性了如指掌的話，那就不用看這一小節了~

2.1 Promise

Promise有很多版本，也有很多實現的庫，但是這里主要是介紹ES6標準的內容。如果閱讀以下幾條特性覺得不懂的話建議先看看上面兩本書相應的章節。

關于promise，首先要意識到它是一種對象。這種對象可以用Promise構造函數來創建，也可以通過Nodejs本身一些默認的返回來獲取這種對象。

promise對象有三種狀態：Pending，Fulfilled，Rejected。分別對應著未開始的狀態，成功的狀態，以及失敗的狀態。

這種對象常常封裝著異步的方法。在異步方法里面，通過resolve和reject來劃定什么時候算是成功，什么時候算是錯誤，同時傳參數給這兩個函數。這些參數就是異步得到的結果或者錯誤。

異步有成功的時候，也有錯誤的時候。對象通過then和catch方法來規定異步結束之后的操作(正確處理函數/錯誤處理函數)。而then和catch是Promise.prototype上的函數，因此“實例化”之后(其實并非真正的實例)可以直接使用。

這個promise對象還有一個神奇的地方，就是可以級聯。每一個then里面返回一個promise對象，就又像上面所提的那樣，有異步就等待異步，然后選擇出規定好的正確處理函數還是錯誤處理函數。

2.2 Generator

Generator函數是一個帶星星函數，而且是一個可以暫停的函數。

函數的內部通過yield來推進函數。通過定義yield后面的值來決定返回的value。

函數返回一個遍歷器，這個遍歷器有一個next方法，可以獲取一個對象，這個對象就包含了yield定義好的參數。

關于ES6的知識的其它特性就不談了，對寫同(yi)步代碼的話掌握以上這些已經足夠了。

3. Co

噔噔噔噔!神奇的Co登場了!這是一個tj大神寫的庫。使用方法很簡單，在Github上的README也講得很清楚了。主要就是兩點：

Co函數里面包裹一個generator函數，在generator函數里面可以yield  promise對象，從而達到異步的目的。在Co的內部實現里面是通過遞歸調用next函數，把每一個promise的值返回出來，從而實現異步轉“同步”的寫法。

Co函數返回一個promise對象，可以調用then，catch方法來對Generator函數返回的結果進行傳遞。方便進行后續的成功處理或者錯誤處理。

4. 如何用同步的寫法寫異步的代碼

下面展示一段異步處理的代碼，可以看到，同步的寫法寫異步真的很爽...

function *foo(res, name, newPassword, oldPassword) {   try {     // yield一個promise對象，如果有錯誤就會被后面的catch捕捉到，成功就會返回user。     const user = yield new Promise(function(resolve, reject) {       // 常見的數據庫讀取星系       User.get(name, function(err, user) {         if(err) reject(err)         resolve(user)       })     })      if(user.password != oldPassword) {       return res.send({errorMsg:"密碼輸入錯誤！"})     }      // 看到這一個異步函數和上一個的異步在寫法上是基本上“同步”的，沒有了相互嵌套，很優雅~也更加方便了debug~     yield new Promise(function(resolve, reject) {       User.update(name, newPassword, function(err) {         if(err) reject(err)         res.send({msg: "你成功更換密碼了！"})         resolve()       })     })    } catch(e) {     console.log("Error:", e)     return res.send({errorMsg:"Setting Fail!"})   } }  // 使用的話就直接調用co包含對應的Generator函數即可。 co(foo(res, name, newPassword, oldPassword))

關于Promise和Generato中如何用同步方法寫異步JavaScript就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。