Generator初识

beita 发布于2019-08-23 14:53 / 1288人阅读

摘要：一简介函数是引入的新型函数，用于异步编程，跟对象联合使用的话会极大降低异步编程的编写难度和阅读难度。二简单示例和注意函数不能直接使用，是通过方法获取的返回结果，而可以提前终止函数。

一、简介

Generator函数是ES6引入的新型函数，用于异步编程，跟Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。

与普通函数的区别：

function关键字与函数名之间有一个星号；

函数体内部使用yield语句，定义不同的内部状态（yield在英语里的意思就是“产出”）。

二、简单示例 1、yield和return

function* Foo() {
    yield "hello";
    yield "world";
    return "!";
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

注意：generator函数不能直接使用，是通过next()方法获取yield/return的返回结果，而return可以提前终止函数。foo.return("!")方法也可终止函数。

2、yield* 字符串方式

function* Foo() {
    yield* "hello";
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

打印结果：

数组方式

function* Foo() {
    yield* ["a", "b", "c"];
}
var foo = Foo();

console.log(foo.next());
console.log(foo.next());
console.log(foo.next());
console.log(foo.next());

打印结果：

3、与for of配合使用 yield和return

function* Foo() {
    yield 1;
    yield 2;
    return 3;
}
var foo = Foo();

for(var v of foo) {
    console.log(v);
}

打印结果：

从上可以看出for of不执行return值

yield*

function* Foo() {
    yield* "hello";
}
var foo = Foo();

for(var v of foo) {
    console.log(v);
}

打印结果：

4、throw方法

function* Foo() {
    try {
        yield;
    } catch(e) {
        console.log("内部捕获", e);
    }
}

var foo = Foo();
foo.next();

try {
    foo.throw("a");
    foo.throw("b");
} catch (e) {
    console.log("外部捕获", e);
}

三、配合Promise使用

function promiseFn() {
    new Promise(function(resolve, reject) {
        setTimeout(function() {
            foo.next("G");
        }, 1000);
    });
}

function* Foo() {
    var a = yield promiseFn();
    var b = yield promiseFn();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo(); // foo是全局变量，挂在window上，存在变量提升，在执行到promise异步的时候，可以直接使用
foo.next();

四、配合ajax使用

demo.php

"tom","age"=>rand()];
echo json_encode($a);

demo.html

function ajax() {
    $.ajax({
        type: "get",
        url: "demo.php",
        success: function(res) {
            foo.next(res);
        },
        error: function(error) {
            foo.next(error);
        }
    });
}

function* Foo() {
    var a = yield ajax();
    var b = yield ajax();
    console.log(a, 111);
    console.log(b, 222);
}

var foo = Foo();
foo.next();

打印结果：

云服务器 GPU云服务器 docker初识初识关系数据库 Generator generator使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101302.html

PHP下的异步尝试一：初识生成器

摘要：下的异步尝试系列下的异步尝试一初识生成器下的异步尝试二初识协程下的异步尝试三协程的版自动执行器下的异步尝试四版的下的异步尝试五版的的继续完善生成器类获取迭代器当前值获取迭代器当前值返回当前产生的键生成器从上一次处继续执行重置迭代器向生成器中 PHP下的异步尝试系列 PHP下的异步尝试一：初识生成器 PHP下的异步尝试二：初识协程 PHP下的异步尝试三：协程的PHP版thunkify自...

tomorrowwu 2019-07-01 12:31 评论0 收藏0
基于 Generator 和 Iterator 的惰性列表

摘要：在某些不定长度的列表操作上，惰性列表会让代码和结构更灵活。方法本身是立即执行的，如果满足条件，这里的方法会执行两次。结语和是带给我们的非常强大的语言层面的能力，它本身的求值可以看作是惰性的。初识 Lazy List 如果有了解过 Haskell 的朋友，对下面的这些表达一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...

superw 2019-08-23 12:09 评论0 收藏0
初识fetch

摘要：后面可以跟对象，表示等待才会继续下去执行，如果被或抛出异常则会被外面的捕获。没有获取状态方法，标准没有提供获取当前状态或者的方法。只允许外部传入成功或失败后的回调。这种进度通知的功能还没有用过，暂不知道如何替代。始终不是很懂fetch的作用，然后查了很多资料，看了一篇不错的文章，结合自己之前学习的Promise，然后做一篇文章，稍微记录一下。传统 Ajax 已死，Fetch 永生虽...

rickchen 2019-08-20 14:49 评论0 收藏0
angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0