前端異步解決方案-4.1（generator+promise）

前言

終於開始寫generator了，離這個系列的終結又進了一步。其實generator我還處在會用但是不理解原理的狀態，但是知識不總結，不記錄的話容易忘記，所以我還是把現在的一點心得記錄下來。等到以後有了更深的理解再回來補充。
想要看更深度解析generator的朋友可以移步漫話JavaScript與異步·第三話——Generator：化異步爲同步這裏面談及了generator的底層實現及generator的用法。是我看過的文章中自認爲解釋的最好的一篇，而且篇幅也不長，建議大家去看一看。

實現

根據一貫的作風，我們先嚐試自己實現generator
嘗試ing............
好了嘗試完了，實現不了，老老實實的學習generator的用法吧。

用法

在我的理解中，generator最大的特點就是可以讓函數在特定的地方停下，等待被喚醒後在函數內部環境中繼續執行。我們結合代碼來看一看：
註釋：【1】Iterator Object對象：參考 Iterator 文章比較長，但是如果只是想要了解什麼是Iterator Object的話看完第一小節就足夠了

//輸出分割線的函數，感興趣的可以自行百度如何設置console.log的樣式
function cut_off(color) {
  console.log("%c------------------------------------------","color:"+color+";font-size:20px");
}

//* 爲generator函數的標識，如果我們想要創建一個generator函數就必須在function後面加上*
function* generator() {
  let num1, num2;
  num1 = 123;
  console.log("num1", num1, "num2", num2);
  //yield就是該函數內部暫停的地方，暫停的同時會把yield後面的值返回出去
  yield num1;
  num2 = 456;
  console.log("num1", num1, "num2", num2);
  yield num2;
  console.log("num1", num1, "num2", num2);
  return "end"
}

console.log("generator defined");
//函數返回一個Iterator Object對象；
// 但是與普通函數不同的是，這個時候函數並不執行函數內部的代碼
let g = generator();
console.log("g defined");
cut_off("red");

console.log("g.next() run 1");
//開始執行函數內部的代碼，並且遇在到yield的時候返回 yield後面的值
console.log(g.next());
cut_off("red");

console.log("g.next() run 2");
//從上次執行完的地方執行，並且遇在到yield的時候返回 yield後面的值
console.log(g.next());
cut_off("red");

console.log("g.next() run 3");
//從上次執行完的地方執行，這次是最後一次有值的返回，done的狀態會變爲true
console.log(g.next());
cut_off("red");

console.log("g.next() run 4");
//已經執行完成之後再次被調用，永遠返回{value:undefined, done: true}
console.log(g.next());
cut_off("red");

console.log("g.next() run 5");
//已經執行完成之後再次被調用，永遠返回{value:undefined, done: true}
console.log(g.next());

貼上一張代碼和運行結果的對比圖