Generator

概念

• Generator 函數是 ES6 提供的一種異步編程解決方案
• Generator 函數是一個狀態機，封裝了多個內部狀態。
• Generator 還是一個遍歷器對象生成函數.返回的遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態。

形式上

Generator 函數是一個普通函數，但是有兩個特征。

• 一是，function關鍵字與函數名之間有一個星號；
• 二是，函數體內部使用yield表達式，定義不同的內部狀態（yield在英語里的意思就是“產出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
// --- 輸出 ------
console.log(hw.next()) // { value: 'hello', done: false }
console.log(hw.next()) // { value: 'world', done: false }
console.log(hw.next()) // { value: 'ending', done: true }
console.log(hw.next()) // { value: undefined, done: true }

例子

// 執行順序
function* test(x) {
  console.log(111)
  let a = yield x + 222

  console.log('a', a)
  let b = yield 333 + a

  console.log('b', b)
  let c = yield 44444 + b

  console.log('c', c)
}

 
let t = test(1)

console.log(t.next())
console.log(t.next())
console.log(t.next())
console.log(t.next())

/**
111
{ value: 223, done: false }
a undefined
{ value: NaN, done: false }
b undefined
{ value: NaN, done: false }
c undefined
{ value: undefined, done: true }
**/

發現除了第一個next()能正常輸出{ value: 223, done: false },第二個next開始輸出 a=undefined.

查閱文檔后發現

yield表達式本事是沒有返回值, 或者說總是返回undefined.

但是, next 方法可以帶一個參數, 該參數會被當做上一個yield表達式的返回

• 給next方法傳遞參數

// 執行順序
function* test(x) {
  console.log(111)
  let a = yield x + 222

  console.log('a', a)
  let b = yield 333 + a

  console.log('b', b)
  let c = yield 44444 + b

  console.log('c', c)
}


let t = test(1)

console.log(t.next())
//111
// { value: 223, done: false }

// next 方法的參數
// yield表達式本身沒有返回值，或者說總是返回undefined。
// next方法可以帶一個參數，該參數就會被當作上一個yield表達式的返回值。
console.log(t.next(33))
// a 33
// { value: 366, done: false }

console.log(t.next('cc'))
//b cc
// { value: '44444cc', done: false }

console.log(t.next('dd'))
// c dd
// { value: undefined, done: true }

generator函數的運行順序如下：

image-20201023154710301

generator搭配promise將異步回調變成同步模式

function request(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(it.next(data + 1))
    }, 1000)
  })
}

function* getApi() {
  let res1 = yield request(1)
  console.log('res1', res1)
  let res2 = yield request(res1)
  console.log('res2', res2)
  let res3 = yield request(res2)
  console.log('res3', res3)
}

let it = getApi()
it.next()

// res1 2
// res2 3
// res3 4