Promise & Generator——幸福地用同步方法寫異步JavaScript

Harpsichord1207 發(fā)布于2019-08-22 10:41 / 1548人閱讀

摘要：在這里看尤雨溪大神的這篇小短文，非常精簡(jiǎn)扼要地介紹了當(dāng)前常用的。根據(jù)尤雨溪大神的說法，的也只是的語法糖而已。對(duì)象有三種狀態(tài)，，。對(duì)象通過和方法來規(guī)定異步結(jié)束之后的操作正確處理函數(shù)錯(cuò)誤處理函數(shù)。方便進(jìn)行后續(xù)的成功處理或者錯(cuò)誤處理。

最近在寫一個(gè)自己的網(wǎng)站的時(shí)候（可以觀摩一下~Colors），在無意識(shí)中用callback寫了一段嵌套了5重回調(diào)函數(shù)的可怕的代碼?；剡^神來的時(shí)候被自己嚇了一跳，這可不行啊，丑得沒法看??！于是打算嘗試一下一些流行的異步的解決方案。經(jīng)過一番折騰之后...我終于找到了一個(gè)令自己滿意的方案了（愛不釋手）。不過在正式介紹它之前先扯一些其他的相關(guān)知識(shí)先吧！

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

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

需要寫爬蟲之類控制并發(fā)數(shù)的我會(huì)用async.js；它的有一些API還是很方便的。

寫前端的代碼的時(shí)候可能會(huì)比較傾向于考慮Promise，因?yàn)橐话銇碚f前端的異步場(chǎng)景除了ajax之外貌似也不是很多了。而且之前使用過isomorphic-fetch，感覺很棒?？梢钥次抑暗奈恼聗

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

2. Promise & Generator簡(jiǎn)單入門

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

2.1 Promise

Promise有很多版本，也有很多實(shí)現(xiàn)的庫，但是這里主要是介紹ES6標(biāo)準(zhǔn)的內(nèi)容。如果閱讀以下幾條特性覺得不懂的話建議先看看上面兩本書相應(yīng)的章節(jié)。

關(guān)于promise，首先要意識(shí)到它是一種對(duì)象。這種對(duì)象可以用Promise構(gòu)造函數(shù)來創(chuàng)建，也可以通過Nodejs本身一些默認(rèn)的返回來獲取這種對(duì)象。

promise對(duì)象有三種狀態(tài)：Pending，Fulfilled，Rejected。分別對(duì)應(yīng)著未開始的狀態(tài)，成功的狀態(tài)，以及失敗的狀態(tài)。

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

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

這個(gè)promise對(duì)象還有一個(gè)神奇的地方，就是可以級(jí)聯(lián)。每一個(gè)then里面返回一個(gè)promise對(duì)象，就又像上面所提的那樣，有異步就等待異步，然后選擇出規(guī)定好的正確處理函數(shù)還是錯(cuò)誤處理函數(shù)。

2.2 Generator

Generator函數(shù)是一個(gè)帶星星函數(shù)，而且是一個(gè)可以暫停的函數(shù)。

函數(shù)的內(nèi)部通過yield來推進(jìn)函數(shù)。通過定義yield后面的值來決定返回的value。

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

關(guān)于ES6的知識(shí)的其它特性就不談了，對(duì)寫同（yi）步代碼的話掌握以上這些已經(jīng)足夠了。

3. Co

噔噔噔噔！神奇的Co登場(chǎng)了！這是一個(gè)tj大神寫的庫。使用方法很簡(jiǎn)單，在Github上的README也講得很清楚了。主要就是兩點(diǎn)：

Co函數(shù)里面包裹一個(gè)generator函數(shù)，在generator函數(shù)里面可以yield promise對(duì)象，從而達(dá)到異步的目的。在Co的內(nèi)部實(shí)現(xiàn)里面是通過遞歸調(diào)用next函數(shù)，把每一個(gè)promise的值返回出來，從而實(shí)現(xiàn)異步轉(zhuǎn)“同步”的寫法。

Co函數(shù)返回一個(gè)promise對(duì)象，可以調(diào)用then，catch方法來對(duì)Generator函數(shù)返回的結(jié)果進(jìn)行傳遞。方便進(jìn)行后續(xù)的成功處理或者錯(cuò)誤處理。

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

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

function *foo(res, name, newPassword, oldPassword) {
  try {
    // yield一個(gè)promise對(duì)象，如果有錯(cuò)誤就會(huì)被后面的catch捕捉到，成功就會(huì)返回user。
    const user = yield new Promise(function(resolve, reject) {
      // 常見的數(shù)據(jù)庫讀取星系
      User.get(name, function(err, user) {
        if(err) reject(err)
        resolve(user)
      })
    })

    if(user.password != oldPassword) {
      return res.send({errorMsg:"密碼輸入錯(cuò)誤！"})
    }

    // 看到這一個(gè)異步函數(shù)和上一個(gè)的異步在寫法上是基本上“同步”的，沒有了相互嵌套，很優(yōu)雅~也更加方便了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!"})
  }
}

// 使用的話就直接調(diào)用co包含對(duì)應(yīng)的Generator函數(shù)即可。
co(foo(res, name, newPassword, oldPassword))

5. 總結(jié)

適合使用場(chǎng)景的方法才是最好的方法。但是當(dāng)你在寫Node的時(shí)候開始受到回掉地獄的困擾的時(shí)候，不妨嘗試一下Co？用同步寫法寫異步的感覺真的很不賴??！

如果文中有某些地方有錯(cuò)誤或者不妥當(dāng)?shù)牡胤?，歡迎指出來，感激不盡！互相學(xué)習(xí)才能進(jìn)步嘛~

GPU云服務(wù)器云服務(wù)器 jquery_promise異步同步和異步同步與異步同步回調(diào)和異步回調(diào)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91069.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Harpsichord1207

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ArdHosting：印度尼西亞VPS，限時(shí)免安裝費(fèi)，12.6美元/月起，無限流量

閱讀 3569·2021-10-18 13:30
學(xué)習(xí)python就用python技能樹｜Python技能樹測(cè)評(píng)

閱讀 3011·2021-10-09 09:44
CSS資源相關(guān)整理

閱讀 2036·2019-08-30 11:26
PostCSS自學(xué)筆記（二）【番外篇一】

閱讀 2431·2019-08-29 13:17
js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

閱讀 814·2019-08-29 12:17
Ajax的原理和實(shí)現(xiàn)步驟

閱讀 2314·2019-08-26 18:42
filter 和 map 的異同

閱讀 578·2019-08-26 13:24
通過寫一個(gè)簡(jiǎn)單的東方系彈幕入門微信小游戲

閱讀 3013·2019-08-26 11:39

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Promise & Generator——幸福地用同步方法寫異步JavaScript

相關(guān)文章

**ES6&ES7中的異步之Generator函數(shù)與異步編程**

細(xì)說JS異步發(fā)展歷程

細(xì)說JS異步發(fā)展歷程

**簡(jiǎn)單理解Javascript的各種異步流程控制方法**

**探索Javascript 異步編程**

發(fā)表評(píng)論

0條評(píng)論

Harpsichord1207

男|高級(jí)講師

TA的文章

ArdHosting：印度尼西亞VPS，限時(shí)免安裝費(fèi)，12.6美元/月起，無限流量

學(xué)習(xí)python就用python技能樹｜Python技能樹測(cè)評(píng)

CSS資源相關(guān)整理

PostCSS自學(xué)筆記（二）【番外篇一】

js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

Ajax的原理和實(shí)現(xiàn)步驟

filter 和 map 的異同

通過寫一個(gè)簡(jiǎn)單的東方系彈幕入門微信小游戲

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Promise & Generator——幸福地用同步方法寫異步JavaScript

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！