ECMAScript-异步编程-Generator

一、ECMAScript-异步编程-Generator

1. Generator的定义

// *符号 
function * generator(){
    //...
}

2. Generator的输出yield和执行next

function * foo() {
  for(let i = 0; i < 3; i++) {
    yield i
  }
}
let f = foo(); // 这边返回的是一个Generator迭代器
console.log(f.next()) // 通过手动的去执行 一次next只会执行一次

注意：yield 关键字不能在构造函数中使用，只能在Generator函数中使用。
// 这种就是有问题的
function * gen(args) {
  args.forEach(item => {
      yield item + 1
  });
}

// 注意 每次next的参数是上一次yield的返回值
function * gen(x) {
    let y = 2 * (yield(x + 1))
    let z = yield(y / 3)
    return x + y + z
}

let g = gen(5)
console.log(g.next()) // 6   这边就是5+1的返回值
console.log(g.next()) // NaN  因为这边next的参数未传，所以认为yield(x + 1)的返回值是undefined， 2 * undefined结果NaN，NaN/3也是NaN 所以输出结果为NaN
console.log(g.next()) // NaN x+y+z 同样也是NaN


let g = gen(5)
console.log(g.next()) // 6   这边就是5+1的返回值
console.log(g.next(15)) // 10  y=30  因为这边next的参数传入15，所以认为yield(x + 1)的返回值是15， 2 * 15结果30，30/3 所以输出结果为10
console.log(g.next(16)) // 51  yield(y / 3)为16 y=30 x=5  所以为51

// 用法：比如每调用一次该函数，这个函数遇到是9或者9的倍数进行一次的输出
function * count(x=1) {
    while (true) {
        if (x % 9 === 0) {
            yield x
        }
        x++
    }
}
let n = count()
console.log(n.next().value) // 9
console.log(n.next().value) // 18
console.log(n.next().value) // 27
console.log(n.next().value) // 36
console.log(n.next().value) // 45
// 注意：如果没有Generator那while里面将是一个死循环。

3. 发送异步请求

// 举例：依次请求A、B、C
function ajax(url, callBack) {
    // 1. 创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2. 发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()

    // 3. 服务端响应
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callBack(obj)
        }
    }
}

function request(url) {
  ajax(url, res => {
    getData.next(res)
  })
}

function* gen() {
  let res1 = yield request('xxxa')
  let res2 = yield request('xxxb')
  let res3 = yield request('xxxc')
}

// 调用
let getData = gen()
getData.next()