ES6之 Generator 函数

最新推荐文章于 2024-03-27 09:15:00 发布

猫老板的豆

最新推荐文章于 2024-03-27 09:15:00 发布

阅读量572

点赞数

本文链接：https://blog.csdn.net/x550392236/article/details/106028014

版权

JavaScript 同时被 2 个专栏收录

78 篇文章 10 订阅

订阅专栏

ES6

21 篇文章 1 订阅

订阅专栏

generator（生成器）是ES6标准引入的新的数据类型。
一个generator看上去像一个函数，但可以返回多次。

特征

Generator函数有两个特征:

function关键字与函数名之间有一个星号*
函数体内部使用yield语句定义不同的内部状态

声明方式

声明方式一

function* main() {
    // do something……
}

声明方式二

function *main() {
    // do something
}

yield与next()

yield 与 next() 这是控制代码执行顺序的一对好基友。

通过 yield 语句可以在生成器函数内部暂停代码的执行使其挂起，此时生成器函数仍然是运行并且是活跃的，其内部资源都会保留下来，只不过是处在暂停状态。

在迭代器上调用next()方法可以使代码从暂停的位置开始继续往下执行。

// 首先声明一个生成器函数
function* main() {
    console.log('starting* main()');
    yield; // 暂停，不许往下走了
    console.log('continue yield 1');
    yield; // 暂停，又不许往下走了
    console.log('continue yield 2');
}

// 构造处一个迭代器it
let it = main();   // 进行实例化之后，main()里的代码不会主动执行

// 调用next()启动*main生成器，表示从当前位置开始运行，停在下一个yield处
it.next(); // 输出 starting* main()     =>     {value: undefined, done: false}

// 继续往下走
it.next(); // 输出 continue yield 1     =>     {value: undefined, done: false}

// 再继续往下走
it.next(); // 输出 continue yield 2     =>     {value: undefined, done: true}

消息传递

next(xxx) 中传递的 xxx 参数，被作为上个阶段异步任务(yield)的返回结果

生成器的作用之一是消息传递。通过 yield ... 和 next(...) 组合使用，可以在生成器的执行过程中构成一个双向消息传递系统。

当next(..)执行到yield语句处时会暂停生成器的执行，同时next(...)会得到一个带有value属性的对象，yield语句后面带的值会赋给value(如果yield后面没有值，value就为undefined)。可以将yield效果看成跟return类似。
当生成器处于暂停状态时，暂停的yield表达式处可以接收下一个启动它的next(...)传进来的值。当next(...)使生成器继续往下执行时，其传入的值会将原来的yield语句替换掉。

function* main() {
    let x = yield "starting";
    let y = yield (x * 2);
    console.log(x, y);
    return x + y;
}

let it = main();

let res = it.next();     // {value: "starting", done: false}
console.log(res.value);  // 输出"starting" （yield语句后跟的值传给了next()的对象）

res = it.next(5);        // 第二个 next 方法带有参数5，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量 x 接收(x = 5)。因此，这一步的 y = (x * 2) = 10。
console.log(res.value);  // 输出10 （x * 2得到了10传给next(5)运行后的对象）

res = it.next(20);       //  第三个 next 方法带有参数20，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量 y 接收(y = 5)。因此，这一步的 x=5，y=20。输出5 20    （执行后面的console.log(x, y)语句分别输出x,y的值）

console.log(res.value);  // 输出25  (return ...的值传给了next(20)运行后的对象)

注意:

第一个next()仅仅是用于启动生成器用的，并不会传入任何东西，如果传入了参数也会被自动忽略掉。
yield在值传递方面的作用相当于return，你也可以把它当做一个return语句来看待，如果yield后面不加参数，则默认yield undefined;
最后一个next()执行完毕之后，得到的值是* main()函数return出来的值，如果函数没有自己加return语句，一样也会默认return undefined;
next()执行完毕后会返回一个对象，属性值有两个，分别为value(从yield或return处拿到的值)和done(boolean值，标识生成器是否执行完毕)。

接下来尝试一下异常传值的情况：

function* main() {
    let x = yield "starting";
    let y = yield (x * 2);
    console.log(x, y);
    return x + y;
}

let it = main();

let res = it.next('111'); //  {value: "starting", done: false} => '111'被丢弃啦~~ （第一个next没有上一个yield ）
console.log(res.value);  // 输出"starting"

res = it.next();         // 第二个next没有参数，上一个yield x直接返回undefined
console.log(res.value);  // 输出NaN （undefined * 2得到了NaN传给next()运行后的对象）

res = it.next(6);        // 第三个next参数是6，上一个yield y直接返回6
                        // 输出 undefined 6
console.log(res.value); // 输出NaN (undefined + 6)

Generator在流程控制中的应用

首先来看下面一个使用传统回调函数实现异步的例子：

function getCallSettings() {
    // utils.ajax方法用于发起ajax请求
    utils.ajax({
        url: '/dialer/dialerSetting',
        method: "GET",
        success: (res) => {
            let settingInfo = res.dialerSetting;
            dealData(settingInfo);
        },
        error: (err) => {
            console.log(err);
        }
    });
}
function dealData(data) {
    // do something……
}
getCallSettings();

可以看出，dealData只能在ajax请求拿到数据之后才能运行，所以需要嵌套在success回调中执行。以上例子嵌套的不深，依赖settingInfo的地方也不多，只有一个dealData函数，所以看起来还好，但是，试想一下如果接下来的很多其他请求都依赖于该请求返回的数据，或者很多代码逻辑都需要拿到settingInfo之后才能进行，那么代码可读性就会差很多了。
所以，接下来尝试以生成器的方式实现以上场景：

function getCallSettings() {
    utils.ajax({
        url: '/dialer/dialerSetting',
        method: "GET",
        success: (res) => {
            it.next(res.dialerSetting); // 将res.dialerSetting传给yield表达式
        },
        error: (err) => {
            it.throw(err); // 抛出错误
        }
    });
}
function* dealData() {
    try{
       let settingInfo = yield getCallSettings();
       // do something……
    }
    catch(err) {
      console.log(err); // 接收错误
    }
}
let it = dealData();
it.next(); // 启动生成器

此处的yield是用于在异步流程中暂停阻塞代码，当然，它阻塞的只有生成器里面的代码，生成器外部的丝毫不受影响。let settingInfo = yield getCallSettings();中，通过yield把异步的流程完全抽离出去，实现了看似顺序同步的代码，这无疑是巨大的改进。

Generator+Promise实现完美异步

function getCallSettings() {
    // utils.ajax方法支持返回promise对象，把得到的promise return出去
    return utils.ajax({
        url: '/dialer/dialerSetting',
        method: "GET",
    });
}
function* dealData() {
    try {
        let settingInfo = yield getCallSettings();
        // do something……
    }
    catch(err) {
        console.log(err); // 接收错误
    }
}

let it = dealData();
let promise = it.next().value; // 注意，这里拿到yield出来的promise
promise.then(
    (info) => {
        it.next(info); // 拿到info传给yield表达式
    }, 
    (err) => {
        it.throw(err); // 抛出错误
    }
);

当多个Promise并发请求时，正确的写法可以更好地提高性能

// 满屏都是代码，这里代码尽量精简些啦
function* dealData() {
    let r1 = yield utils.ajax(reqUrl1); // 请求1获取到 r1
    let r2 = yield utils.ajax(reqUrl2); // 请求2获取到 r2

    let reqUrl3 = getUrl(reqUrl1, reqUrl2); // 请求3需要的url依赖于前面两个请求
    let r3 = yield utils.ajax(reqUrl3);
    // do something……
}

以上写法中，生成器执行时会先发出请求1，请求1返回后才会发出请求2，请求2返回之后，再发出请求3。其实在这里请求1和2之间不存在依赖关系，是可以同时进行的。所以还可以用一种效率更高的写法：

// 满屏都是代码，这里代码也尽量精简些啦
function* dealData() {
    let p1 = utils.ajax(reqUrl1); // 请求1获取到 r1
    let p2 = utils.ajax(reqUrl2); // 请求2获取到 r2

    let r1 = yield p1;
    let r2 = yield p2;

    let reqUrl3 = getUrl(reqUrl1, reqUrl2); // 请求3需要的url依赖于前面两个请求
    let r3 = yield utils.ajax(reqUrl3);
    // do something……
}

这样p1和p2之间就可以同时进行，不会相互阻塞啦~~是不是很棒棒呢

async和await

以上yield + Promise的写法需要我们对拿到的promise的决议进行人工处理(区分成功或失败)，在ES7中提供了async/await帮我们省掉了这个步骤：async/await组合的出现使得异步的世界更加完美啦~~
下面改写一下代码实现形式：

function getCallSettings() {
    return utils.ajax({
        url: '/dialer/dialerSetting',
        method: "GET",
    });
}
async function dealData() {
    try {
        let settingInfo = await getCallSettings(); // await会暂停在这，直到promise决议(请求返回)
        // do something……
    }
    catch(err) {
        console.log(err);
    }
}
dealData();

dealData函数不需要再被声明为生成器函数，而是声明为async函数；
同时，其内部也不用yield出一个promise，而是用await进行等待，直到promise决议。

那么async/await的写法和yield相比孰优孰劣呢？
其实个人感觉两者都有自己独到的长处，没有优劣之分(纯属个人见解，不喜勿喷)

async/await在处理promise的层面上省略了对决议的人工处理，让代码量得以减少，语义上也更容易理解。
yield包容性更广泛，async只能接口promise，yield除此之外还能接收字符串、数组、对象等各种类型的数据。

yield 委托

为什么要用委托呢？因为，一个代码组织合理的程序中，出于功能模块化等原因，我们很可能在一个生成器中调用另外一个生成器，比如在a()中调用b()，但是通常情况下a()的实例中是无法使用next方法对b()内部进行操控的，所以这个时候我们就可以使用yield将b()委托给a()。

function *a() {
    console.log('a start');
    yield 2;
    console.log('a end');
}
function *b() {
    console.log('b start');
    yield 1;
    yield *a(); // 将a委托给b
    yield 3;
    console.log('b end');
}

let it = b();

it.next().value;    // b start
                    // 1 
it.next().value;    // a start
                    // 2
it.next().value;    // a end
                    // 3
it.next().value;    // b end