es6~9之Generator函数解析（精选篇）

前言

Generator是es6提供的一个异步的操作方法，是一个状态机，封装了多个内部状态。
以下内容分用法和原理两部分。

用法：

一、Generator基本用法：

1.无参数

function* fn() {
  yield 1;
  yield 2;
  return 'ending';
}
var f = fn()
console.log(f.next()) // {value: 1, done: false}
console.log(f.next()) // {value: 2, done: false}
console.log(f.next()) // {value: "ending", done: true}

function* fn() {
  yield 1;
  yield 2;
  return 'ending';
}
var f = fn()
for (var i of f) {
  console.log(i) // 1,2
}

我们可以通过在函数前加*方式建立Generator函数，里面就可以通过yield返回了。通过next()方法或者var ... of方法获取数据。done:false代表yield执行并未结束，done: true表示程序执行结束。

yield与return比较：

相同点：都是可以返回紧随其后的数据。
不同点：yield是函数暂定，可以有多个返回；return是函数结束，只能有一次返回。

2.有参数
function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 2,3
  return 'ending';
}

var f = generator()
f.next(1)
f.next(2)
f.next(3)

看上述代码可以看出：yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。

但是我们想要的是yield后面的值也就是"a","b"。我们的思路就是拿上一个next的value值当下一个next的参数不就行咯！

function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 'a','b'
  return 'ending';
}

var f = generator()
const a_obj = f.next('defaultValue')
const b_obj = f.next(a_obj.value)
f.next(b_obj.value)

打印出来我们需要的a,b了。第一个next的参数可以是任意值，没有特殊的意义。

我们封装一下：

function* generator() {
  var a = yield 'a';
  var b = yield 'b';
  console.log(a, b) // 2,3
  return 'ending';
}
dispatch(generator(1));

function dispatch(g) {
  var g_obj = g.next(g.value);
  // 如果Generator函数未结束，就继续调用
  if (!g_obj.done) {
    g.value = g_obj.value
    dispatch(g);
  }
}

哦了，用过redux-saga或者dva effects的，一定很好奇怎么实现的，现在明白了吧。

3.yield * 嵌套
function* g1(){
    yield 2;
    yield 3;
}

function* g2(){
    yield 1;
    yield* fn1();
    yield 4;
}

var g = g2();
console.log(g.next().value); // 1
console.log(g.next().value); // 2
console.log(g.next().value); // 3
console.log(g.next().value); // 4

理解起来就是yield *可以把另一个Generator函数引入到当前Generator函数中，代码上很好理解。

Generator实战：

1、简单实现redux-sage调用接口

function apiInterface(url) {
  Promise.resolve().then(_=>{
    it.next('{"a":1}');
  }) 
}

function* generator() {
  var result = yield apiInterface("http://api");
  var resp = JSON.parse(result || '{}');
  console.log(resp);
}

var it = generator();
it.next();

我们要的其实很简单，就是想在Generator函数中拿到返回值result，此时可以通过微异步函数Promise.resolve()的then方法里面调用一次next方法即可。这样就能拿到接口的数据response了。大家可以把Promise.resolve()换成ajax的方法试一下就知道了。

2、简化promise写法

这里主要实现Generator，其他的简化了。（Generator可直接跑）

先写需要回调的函数：

function step1(url) {
  return {"a":1} 
}
function step2(url) {
  return {"b":2}
}
function step3(url) {
  return {"c":3}
}
  • 普通ajax回调函数：
step1(function (value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
    console.log("结束")
    });
  });
});
  • promise写法：
step1().then(function(value1) {
    return step2(value1);
}).then(function(value2){
    return step3(value2);
}) .then(function(value3) {
    console.log("结束")
});
  • Generator写法：
function* generator(value1) {
  try {
    var value2 = yield step1(value1);
    var value3 = yield step2(value2);
    var value4 = yield step3(value3);
    console.log("结束", value2, value3, value4) // {a: 1} {b: 2} {c: 3}
  } catch (e) {}
}

dispatch(generator(1));

function dispatch(g) {
  var g_obj = g.next(g.value);
  // 如果Generator函数未结束，就继续调用
  if (!g_obj.done) {
    g.value = g_obj.value
    dispatch(g);
  }
}

类似redux，你把dispatch封装一下，就很简单调用了，主要是用起来很方便简洁。

初学者使用generator遇到的问题：

控制台报错：Generator is already running。
解释原因：前言提到Generator是异步编程，但出现同步与异步的混合编写，就会出这个问题。
举例：

function apiInterface(url) {
  it.next('{"a":1}'); 
}

function* generator() {
  var result = yield apiInterface();
}

var it = generator();
it.next();

上述代码中，对JS的单进程而言，一个next()还没结束，就调用了另一个next()；只需要通过异步机制解决即可。比如Promise.resolve().then，或者setTimeout
加了异步的代码：

function apiInterface(url) {
 Promise.resolve().then(_=>{
    it.next({"a":1});
  }) 
}

function* generator() {
  var result = yield apiInterface();
}

var it = generator();
it.next();

原理篇：（来点干货）

Iterator（遍历器）

首先我们先了解下遍历器是什么。

js目前有四种表示\color{red}{集合}数据结构数组（Array）、对象（Object）、Map、Set。这时候就需要一个去统一处理他们的工具，便是Iterator。

我们先去实现它：

var it = makeIterator([1, 2);

console.log(it.next()) // { value: 1, done: false }
console.log(it.next()) // { value: 2, done: false }
console.log(it.next()) // { value: undefined, done: true }

// for (var i of it) {
//   console.log(i)
// }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    [Symbol.iterator]: function () {
      return this;
    },
    next: function() {
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  };
}
  • 从next可以看出Iterator执行机制，我们通过next封装了数据结构的多个状态。
    第一个next，是获取的数组中1的对象值。
    第二个next，是获取的数组中2的对象值。
    第三个next，数组获取完毕，通过done:true告诉用户遍历完毕。
  • Symbol.iterator是什么东西，专门为for-of而生的，通过这个函数我们就可能通过for-of获取数据集合中的值，你试试把这个函数删了，看下for-of会不会报错。

通过我们写的makeIterator方法，大家可以发现Generator的next和for-of的可用性得到了验证。

总结：Generator你可以理解为通过* 和 yiled以封装的方式，实现了next 和 Symbol.iterator方法，更利于用户的使用。

延伸：Iterator使用场景包括解构赋值 、扩展运算符等等es6场景。

下篇文章，async await优化版的gennerator函数。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,372评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,368评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,415评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,157评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,171评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,125评论 1赞 297
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,028评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,887评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,310评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,411评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,004评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2赞 353