接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术。

在异步编程中,还有一种常用的解决方案,它就是Generator生成器函数。顾名思义,它是一个生成器,它也是一个状态机,内部拥有值及相关的状态,生成器返回一个迭代器Iterator对象,我们可以通过这个迭代器,手动地遍历相关的值、状态,保证正确的执行顺序。

一、简单使用

1. 声明

Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字

function* showWords() {
yield 'one';
yield 'two';
return 'three';
} var show = showWords(); show.next() // {done: false, value: "one"}
show.next() // {done: false, value: "two"}
show.next() // {done: true, value: "three"}
show.next() // {done: true, value: undefined}

如上代码,定义了一个showWords的生成器函数,调用之后返回了一个迭代器对象(即show)

调用next方法后,函数内执行第一条yield语句,输出当前的状态done(迭代器是否遍历完成)以及相应值(一般为yield关键字后面的运算结果)

每调用一次next,则执行一次yield语句,并在该处暂停,return完成之后,就退出了生成器函数,后续如果还有yield操作就不再执行了

2. yield和yield*

有时候,我们会看到yield之后跟了一个*号,它是什么,有什么用呢?

类似于生成器前面的*号,yield后面的星号也跟生成器有关,举个大栗子:

function* showWords() {
yield 'one';
yield showNumbers();
return 'three';
} function* showNumbers() {
yield 10 + 1;
yield 12;
} var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: showNumbers}
show.next() // {done: true, value: "three"}
show.next() // {done: true, value: undefined}

增添了一个生成器函数,我们想在showWords中调用一次,简单的 yield showNumbers()之后发现并没有执行函数里面的yield 10+1

因为yield只能原封不动地返回右边运算后值,但现在的showNumbers()不是一般的函数调用,返回的是迭代器对象

所以换个yield* 让它自动遍历进该对象

function* showWords() {
yield 'one';
yield* showNumbers();
return 'three';
} function* showNumbers() {
yield 10 + 1;
yield 12;
} var show = showWords();
show.next() // {done: false, value: "one"}
show.next() // {done: false, value: 11}
show.next() // {done: false, value: 12}
show.next() // {done: true, value: "three"}

要注意的是,这yield和yield* 只能在generator函数内部使用,一般的函数内使用会报错

function showWords() {
yield 'one'; // Uncaught SyntaxError: Unexpected string
}

虽然换成yield*不会直接报错,但使用的时候还是会有问题,因为’one'字符串中没有Iterator接口,没有yield提供遍历

function showWords() {
yield* 'one';
} var show = showWords(); show.next() // Uncaught ReferenceError: yield is not defined

在爬虫开发中,我们常常需要请求多个地址,为了保证顺序,引入Promise对象和Generator生成器函数,看这个简单的栗子:

var urls = ['url1', 'url2', 'url3'];

function* request(urls) {
urls.forEach(function(url) {
yield req(url);
}); // for (var i = 0, j = urls.length; i < j; ++i) {
// yield req(urls[i]);
// }
} var r = request(urls);
r.next(); function req(url) {
var p = new Promise(function(resolve, reject) {
$.get(url, function(rs) {
resolve(rs);
});
}); p.then(function() {
r.next();
}).catch(function() { });
}

上述代码中forEach遍历url数组,匿名函数内部不能使用yield关键字,改换成注释中的for循环就行了

3. next()调用中的传参

参数值有注入的功能,可改变上一个yield的返回值,如

function* showNumbers() {
var one = yield 1;
var two = yield 2 * one;
yield 3 * two;
} var show = showNumbers(); show.next().value // 1
show.next().value // NaN
show.next(2).value // 6

第一次调用next之后返回值one为1,但在第二次调用next的时候one其实是undefined的,因为generator不会自动保存相应变量值,我们需要手动的指定,这时two值为NaN,在第三次调用next的时候执行到yield 3 * two,通过传参将上次yield返回值two设为2,得到结果

另一个栗子:

由于ajax请求涉及到网络,不好处理,这里用了setTimeout模拟ajax的请求返回,按顺序进行,并传递每次返回的数据

 1 var urls = ['url1', 'url2', 'url3'];
2
3 function* request(urls) {
4 var data;
5
6 for (var i = 0, j = urls.length; i < j; ++i) {
7 data = yield req(urls[i], data);
8 }
9 }
10
11 var r = request(urls);
12 r.next();
13
14 function log(url, data, cb) {
15 setTimeout(function() {
16 cb(url);
17 }, 1000);
18
19 }
20
21
22 function req(url, data) {
23 var p = new Promise(function(resolve, reject) {
24 log(url, data, function(rs) {
25 if (!rs) {
26 reject();
27 } else {
28 resolve(rs);
29 }
30 });
31 });
32
33 p.then(function(data) {
34 console.log(data);
35 r.next(data);
36 }).catch(function() {
37
38 });
39 }

达到了按顺序请求三个地址的效果,初始直接r.next()无参数,后续通过r.next(data)将data数据传入

注意代码的第16行,这里参数用了url变量,是为了和data数据做对比

因为初始next()没有参数,若是直接将url换成data的话,就会因为promise对象的数据判断 !rs == undefined 而reject

所以将第16行换成 cb(data || url);

通过模拟的ajax输出,可了解到next的传参值,第一次在log输出的是 url = 'url1'值,后续将data = 'url1'传入req请求,在log中输出 data = 'url1'值

4. for...of循环代替.next()

除了使用.next()方法遍历迭代器对象外,通过ES6提供的新循环方式for...of也可遍历,但与next不同的是,它会忽略return返回的值,如

function* showNumbers() {
yield 1;
yield 2;
return 3;
} var show = showNumbers(); for (var n of show) {
console.log(n) // 1 2
}

此外,处理for...of循环,具有调用迭代器接口的方法方式也可遍历生成器函数,如扩展运算符...的使用

function* showNumbers() {
yield 1;
yield 2;
return 3;
} var show = showNumbers(); [...show] // [1, 2, length: 2]

5. 更多使用

更多使用可参考 MDN - Generator

取代Promise的Generator生成器函数的更多相关文章

  1. ES6笔记(5)-- Generator生成器函数

    系列文章 -- ES6笔记系列 接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还 ...

  2. Generator生成器函数

    接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术. 在异步编程中,还有一种常用的解决方案,它就是Ge ...

  3. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  4. Generator(生成器)函数

    一.基础知识 Generator函数是ES6出现的一种异步操作实现方案. 异步即代码分两段,但是不是连续执行,第一段执行完后,去执行其他代码,等条件允许,再执行第二段. 同步即代码连续执行. 1. G ...

  5. javascript异步编程之generator(生成器函数)与asnyc/await语法糖

    Generator 异步方案 相比于传统回调函数的方式处理异步调用,Promise最大的优势就是可以链式调用解决回调嵌套的问题.但是这样写依然会有大量的回调函数,虽然他们之间没有嵌套,但是还是没有达到 ...

  6. es6 Generator生成器函数

    生成器函数使用function*声明. 在生成器函数内部,有一种类似return的语法:关键字yield.二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yi ...

  7. Generator生成器函数执行过程的理解

    一个最基本的Generator函数格式如下,函数体内部要使用yield修饰符则必须在函数名前加上*号 ; function *testYield(x){ console.log('before yie ...

  8. Python进阶-V 迭代器(Iterator)、生成器(Generator)函数

    一.迭代器 1.可循环的有哪些,即可用for语句或者while语句的数据类型有哪些? 字符串(str).列表(list).元组(tuple).字典(dic).集合(set).枚举类(enumerate ...

  9. 石川es6课程---13-16、generator-认识生成器函数

    石川es6课程---13-16.generator-认识生成器函数 一.总结 一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...

随机推荐

  1. MyBatis的SQL语句映射文件详解

    SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyBAtis配置文件mappers标签中引用 < ...

  2. 51nod 1791 合法括号子段

    有一个括号序列,现在要计算一下它有多少非空子段是合法括号序列. 合法括号序列的定义是: 1.空序列是合法括号序列. 2.如果S是合法括号序列,那么(S)是合法括号序列.3.如果A和B都是合法括号序列, ...

  3. Kali 1.0 / 2.0 安装中文输入法(谷歌pinyin + 其他)

    1.kali默认是没有中午输入法的,需要自己安装一下 2.首先我们先获取root权限 dnt@HackerKali:~$ su密码: 3.安装中文输入法(apt-get 指令不会的同学可以学习一下基础 ...

  4. NYOJ 42 一笔画问题 (并查集+欧拉回路 )

    题目链接 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. 规定,所有的边都只能画一次,不能重复画.   输入 第一行只有一个正整数 ...

  5. Python多线程常用包对比

    python由于本身的特质,不能实现真正的多核并行运算,但是有一些第三方库较好地模拟了在多核环境下的并行运算,例如pp包以及multiprocessing,那么哪种更能充分利用多核心呢? 这里我简单做 ...

  6. [ Mariadb ] 通过HAProxy代理后端Mariadb实现负载均衡

    一.本次环境架构图 由于公司内网服务器有限,所以后端采用Mariadb自带的mysql_multi模型实现多实例. mysql的多实例有两种方式可以实现,两种方式各有利弊. 1.使用多个配置文件启动不 ...

  7. 驱动模块和装模块的概念——Junit单元测试案例

    驱动模块是用来模拟被测试模块的上一级模块,相当于被测模块的主程序.它接收数据,将相关数据传送给被测模块,启用被测模块,并打印出相应的结果. 桩模块(Stub)是指模拟被测试的模块所调用的模块,而不是软 ...

  8. libev 学习使用

    libev 简单的I/O库.  a high performance full featured event loop written in c libev 的大小也比 libevent 小得多并且自 ...

  9. java类型强转

    知乎: 首先基本数据类型不是对象,强转改的是值,分为有损和无损,有损会丢失数据细节. 然后对象,只有继承关系的类才能强转,改变的只是引用,而且向上转型是安全的,把你转为人类是安全的,你还是你,只是现在 ...

  10. AC日记——Crane poj 2991

    POJ - 2991 思路: 向量旋转: 代码: #include <cmath> #include <cstdio> #include <cstring> #in ...