ES6（Generator）

基本定义

Generator是一个迭代器生成函数，其返回值是一个迭代器（Iterator），可用于异步调用。

function* tell() {
    console.log('执行a处理');
    yield 'a';

    console.log('执行b处理');
    yield 'b';

    console.log('执行c处理');
    return 'c';
}

let k = tell();

// 执行next()的时候，会运行到第一个yield为止
console.log(k.next());  // 执行a处理
                        // {value: "a", done: false}

// 执行next()的时候，会运行到第二个yield为止
console.log(k.next());  // 执行b处理
                        // {value: "b", done: false}

// 执行next()的时候，会运行到第三个yield为止
console.log(k.next());  // 执行c处理
                        // {value: "c", done: true}

console.log(k.next());  // {value: undefined, done: true}

常用场景

比如某个事物只有三种状态（状态A，状态B，状态C），而这三种状态的变化是 状态A => 状态B => 状态C => 状态A ，这就是状态机。Generator特别适用于处理这种状态机。

// A，B，C三种状态循环
function* state(){
    while(1){
        yield 'A';
        yield 'B';
        yield 'C';
    }
}
let status = state();

console.log(status.next()); // {value: "A", done: false}
console.log(status.next()); // {value: "B", done: false}
console.log(status.next()); // {value: "C", done: false}
console.log(status.next()); // {value: "A", done: false}
console.log(status.next()); // {value: "B", done: false}

使用案例

案例1：长轮询

// 定义一个generator函数，其返回值是一个promise
let ajax = function* () {
    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                code: 0
            })
        }, 1000);
    })
}

// 定义一个轮询函数，当轮询结果的code!=0时，1秒之后开始下一次轮询
let pull = function () {
    let generator = ajax();
    let step = generator.next();
    step.value.then((v) => {
        if (v.code != 0) {
            setTimeout(() => {
                console.log('wait');
                pull();
            }, 1000);
        } else {
            console.log(v);
        }
    })
}

pull(); // 执行轮询

案例2：抽奖

// 抽奖处理
let draw = function (count) {
    // 此处省略具体的抽奖逻辑
    console.log(`剩余${count}次`);
}

// 根据剩余次数判断是否执行抽奖处理
let residue = function* (count) {
    while (count > 0) {
        count--;
        yield draw(count);
    }
}

// 初始化抽奖次数为5次
let star = residue(5);

// 创建抽奖按钮
let btn = document.createElement('button');
btn.id = 'start';
btn.textContent = '抽奖';
document.body.appendChild(btn);

// 绑定抽奖事件
document.getElementById('start').addEventListener('click', () => {
    star.next();
}, false)

补充：async

• async 函数就是 Generator 函数的语法糖。

async 函数的含义和用法

// 异步编程

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 1000);
    })
}

async function asyncPrint(value, ms) {
    await timeout(ms).then(() => {
        console.log('我是异步处理');
    });
    console.log(value);
}

asyncPrint('hello world', 1000);
// 执行结果：
// 1秒之后，先打印出"我是异步处理"，然后打印出"hello world"

// 普通编程

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 1000);
    })
}

function asyncPrint(value, ms) {
    timeout(ms).then(() => {
        console.log('我是异步处理');
    });
    console.log(value);
}

asyncPrint('hello world', 1000);
// 执行结果：
// 先打印出"hello world"
// 1秒之后，打印出"我是异步处理"