ES6 Generator函数与异步操作详解

Generator与异步操作概述

本文通过具体实例解析ES6中Generator函数与异步操作的应用，供读者参考学习。

Generator与异步操作

Generator基本概念与定义

1. Generator基本概念

可以将Generator视为一种状态机，封装了多个内部状态。调用Generator函数会返回一个遍历器对象，用于遍历其产生的各个状态。在function关键字后添加星号(*)即可定义一个Generator函数。

function* hiGenerator(){
yield 'hi';
yield 'ES5';
return '!';
}
var hi = hiGenerator();
console.log(hi); //hiGenerator {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(hi.next()); //Object {value: "hi", done: false}
console.log(hi.next()); //Object {value: "ES5", done: false}
console.log(hi.next()); //Object {value: "!", done: true}

yield语句与状态暂停机制

2. yield语句的作用

由于Generator函数返回的是遍历器对象，必须调用next()方法才能进入下一个状态，因此它提供了一种可暂停执行的机制。每次执行next()时，若遇到yield语句则暂停执行，并将yield后表达式的值作为返回对象的value属性；若未遇到yield，则返回return语句的值作为value；若无return语句，则value为undefined。

3. next方法的参数传递

next()方法可以接收一个参数，该参数将作为上一条yield语句的返回值。

function* add(c, d){
var a = 0;
a = yield a + c;
a = yield a + d;
return
}
var sum = add(1, 2);
console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(sum.next()); //Object {value: 1, done: false}
console.log(sum.next()); //Object {value: NaN, done: false}
console.log(sum.next()); //Object {value: undefined, done: true}

若不给next()传入参数，后续计算可能无法正常进行。

function* add(c, d){
var a = 0;
a = yield a + c;
a = yield a + d + 1;
return
}
var sum = add(1, 2);
console.log(sum); //add {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
console.log(sum.next()); //Object {value: 1, done: false}
console.log(sum.next(1)); //Object {value: 4, done: false}
console.log(sum.next(3)); //Object {value: undefined, done: true}

遍历Generator与嵌套调用

4. 使用for...of遍历Generator

在使用for...of循环遍历Generator时，无需手动调用next()方法。

5. 调用return方法的影响

当调用Generator函数生成的遍历器对象的return方法时，返回对象的value属性值为return方法的参数。

6. 嵌套调用Generator函数