成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

讓 Generator 自啟動(dòng)

junbaor / 3197人閱讀

摘要：文章同步自個(gè)人博客此前只是簡(jiǎn)單使用而沒(méi)有真正的去研究，這次要好好折騰下這貨。我們要實(shí)現(xiàn)一個(gè)啟動(dòng)器來(lái)運(yùn)行它，并把結(jié)果傳給下一次，這樣就實(shí)現(xiàn)了接收值的功能。就啟動(dòng)起來(lái)了，并且一直執(zhí)行到為為止。如果執(zhí)行不了，請(qǐng)升級(jí)瀏覽器，本例在下通過(guò)。

文章同步自個(gè)人博客：http://www.52cik.com/2016/07/11/generator-co.html

此前只是簡(jiǎn)單使用而沒(méi)有真正的去研究 Generator，這次要好好折騰下這貨。

異步編程

對(duì)于 jser 來(lái)說(shuō)，異步非常熟悉了吧，但是真正理解異步的卻不多，因?yàn)榇蟛糠秩酥恢阑卣{(diào)。
隨著js的快速發(fā)展，異步方案也層出不窮，從最開(kāi)始的回調(diào)到Promise，再到Generator，然后到async/await。
甚至有人說(shuō) async/await 是異步的終極解決方案，我不敢直接贊同，只能說(shuō)是目前最好的異步體驗(yàn)。
本篇先從 Generator 講起，后序再詳細(xì)說(shuō) async/await。

從回調(diào)開(kāi)始

從最最經(jīng)典的 ajax 請(qǐng)求開(kāi)始今天的話題吧。
假如，我們要依次請(qǐng)求 url1, url2, url3 這3個(gè)地址。

$.get("url1", function(r1) {
  $.get("url2", function(r2) {
    $.get("url3", function(r3) {
      console.log(r1, r2, r3);
    });
  });
});

一不小心就寫(xiě)成這樣了。
如果你是 jQuery 粉的話，你可能會(huì)說(shuō)也可以這樣實(shí)現(xiàn)啊。

$.get("url1").then(function(r1) {
  console.log(r1);
  return $.get("url2");
}).then(function(r2) {
  console.log(r2);
  return $.get("url3");
}).then(function(r3) {
  console.log(r3);
});

用 jQuery 的 Deferred 對(duì)象，類(lèi)似 Promise 來(lái)規(guī)避回調(diào)地獄，看著確實(shí)平了，但體驗(yàn)并不是特別友好。

用 Generator 來(lái)和諧回調(diào)

Generator 的基礎(chǔ)這里就不展開(kāi)說(shuō)了，直接說(shuō)應(yīng)用。

function* gen() {
  var r1 = yield $.get("url1");
  var r2 = yield $.get("url2");
  var r3 = yield $.get("url3");

  console.log(r1, r2, r3);
}

這是比較友好的異步方式，但是還有個(gè)至關(guān)重要的因素，怎么運(yùn)行這個(gè) Generator 是個(gè)問(wèn)題。
直接手動(dòng) g.next() 運(yùn)行那肯定不行，鬼知道有多少個(gè) yield。
我們要實(shí)現(xiàn)一個(gè)啟動(dòng)器來(lái)運(yùn)行它，并把 Promise 結(jié)果傳給下一次next，這樣就實(shí)現(xiàn)了 yield 接收值的功能。

先來(lái)實(shí)現(xiàn)一個(gè)最簡(jiǎn)陋的起動(dòng)器。

function run(gen) {
  var g = gen();

  function next(d) {
    var r = g.next(d);
    r.done || r.value.then(function(d){ next(d) }); // 這個(gè)是關(guān)鍵，把值傳回傳
  }

  next();
}

然后我們只要一行代碼。

run(gen);

Generator 就啟動(dòng)起來(lái)了，并且一直執(zhí)行到 done 為 true 為止。

真實(shí)例子

打開(kāi) http://www.52tian.net/ 動(dòng)漫網(wǎng)。非廣告，確實(shí)沒(méi)找到合適的測(cè)試站，湊合下吧。
然后把下面代碼貼到控制臺(tái)，看下結(jié)果。如果執(zhí)行不了，請(qǐng)升級(jí)瀏覽器，本例在 chrome 51 下通過(guò)。

function* gen() {
  var r1 = yield $.get("/json/anime/4126.htm");
  var r2 = yield $.get("/json/anime/11129.htm");
  var r3 = yield $.get("/json/anime/427.htm");

  console.log([r1, r2, r3].join("
"));
}

function run(gen) {
  var g = gen();

  function next(d) {
    var r = g.next(d);
    r.done || r.value.then(function(d){ next(d) }); // 這個(gè)是關(guān)鍵，把值傳回傳
  }

  next();
}

run(gen);
小結(jié)

可能你已經(jīng)發(fā)現(xiàn)了，其實(shí)這就是 co 的原理，但 co 比這個(gè)例子嚴(yán)謹(jǐn)多了，而且api設(shè)計(jì)的也非常友好。
本篇到此也就結(jié)束了，利用 Generator 的 yield 功能實(shí)現(xiàn)參數(shù)回傳，讓代碼看起來(lái)非?！健?，讓異步體驗(yàn)變的更加友好。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79969.html

相關(guān)文章

  • 自定義前端構(gòu)建工具生成器 generator-pg-cloud

    摘要：自定義前端構(gòu)建工具生成器近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個(gè)擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己弄了個(gè)基于的前端構(gòu)建環(huán)境生成器，在此分享給大家，覺(jué)得有用的請(qǐng)?jiān)囉谩?，不出意料的話，?gòu)建環(huán)境已經(jīng)生成完畢了。 自定義前端構(gòu)建工具生成器generator-pg-cloud 近期公司前端一直在做效率提升，流程優(yōu)化，很榮幸這個(gè)擔(dān)子落在了我身上，除了一些培訓(xùn)，分享之外，自己...

    snowell 評(píng)論0 收藏0

  • 通過(guò)ES6 Generator函數(shù)實(shí)現(xiàn)異步流程

    摘要：換句話說(shuō)，我們很好的對(duì)代碼的功能關(guān)注點(diǎn)進(jìn)行了分離通過(guò)將使用消費(fèi)值得地方函數(shù)中的邏輯和通過(guò)異步流程來(lái)獲取值迭代器的方法進(jìn)行了有效的分離。但是現(xiàn)在我們通過(guò)來(lái)管理代碼的異步流程部分，我們解決了回調(diào)函數(shù)所帶來(lái)的反轉(zhuǎn)控制等問(wèn)題。 本文翻譯自 Going Async With ES6 Generators 由于個(gè)人能力知識(shí)有限，翻譯過(guò)程中難免有紕漏和錯(cuò)誤，還望指正Issue ES6 Gener...

    劉厚水 評(píng)論0 收藏0

  • async 更優(yōu)雅異步體驗(yàn)

    摘要：文章同步自個(gè)人博客上一篇讓自啟動(dòng)介紹了通過(guò)起動(dòng)器讓跑起來(lái)，而本篇采用實(shí)現(xiàn)更優(yōu)雅的異步編程。而采用寫(xiě)，代碼則是直接運(yùn)行即可直接運(yùn)行了，無(wú)須寫(xiě)生成器來(lái)運(yùn)行了，而代碼僅僅是改為改為而已。不過(guò)效果確實(shí)非常好，讓異步編程更加的同步了。 文章同步自個(gè)人博客：http://www.52cik.com/2016/07/11/generator-co.html 上一篇《讓 Generator 自啟動(dòng)》介...

    Ajian 評(píng)論0 收藏0

  • yeoman-generator 入門(mén)教程

    摘要：上下文路徑為了方便文件流的輸入輸出，使用兩種位置環(huán)境。目標(biāo)上下文目標(biāo)上下文定義為當(dāng)前工作目錄或含文件最接近的父文件夾。這確保了用戶行為的一致。幫助用戶嚴(yán)重需要覆蓋的內(nèi)容。 摘要 隨著 Web 2.0 和 HTML 5 的流行，現(xiàn)在的 Web 應(yīng)用所能提供的功能和交互能力比之前傳統(tǒng)的 Web 應(yīng)用要強(qiáng)大很多。應(yīng)用的很多實(shí)現(xiàn)邏輯被轉(zhuǎn)移到了瀏覽器端來(lái)實(shí)現(xiàn)。瀏覽器不再只提供單一的數(shù)據(jù)接收和展現(xiàn)...

    caiyongji 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<