讓 Generator 自啟動

junbaor 發(fā)布于2019-08-19 18:46 / 3191人閱讀

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

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

此前只是簡單使用而沒有真正的去研究 Generator，這次要好好折騰下這貨。

異步編程

對于 jser 來說，異步非常熟悉了吧，但是真正理解異步的卻不多，因為大部分人只知道回調(diào)。
隨著js的快速發(fā)展，異步方案也層出不窮，從最開始的回調(diào)到Promise，再到Generator，然后到async/await。
甚至有人說 async/await 是異步的終極解決方案，我不敢直接贊同，只能說是目前最好的異步體驗。
本篇先從 Generator 講起，后序再詳細(xì)說 async/await。

從回調(diào)開始

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

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

一不小心就寫成這樣了。
如果你是 jQuery 粉的話，你可能會說也可以這樣實現(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 對象，類似 Promise 來規(guī)避回調(diào)地獄，看著確實平了，但體驗并不是特別友好。

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

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

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

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

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

先來實現(xiàn)一個最簡陋的起動器。

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

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

  next();
}

然后我們只要一行代碼。

run(gen);

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

真實例子

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

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) }); // 這個是關(guān)鍵，把值傳回傳
  }

  next();
}

run(gen);

小結(jié)

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