ES6深刻浅出 Generator

一步，一步前進の一步

ES6深刻浅出之Generator生成器。本人对生成器的印象是语法难以理解，又没有什么实际的应用场景。为啥要学习一下呢？可能将来某些高级的业务会用到，还有万一面试官问的话，我得能侃几句，显得我牛😏。

定义

Generator 是为异步而生，正常的函数是一进入就必须执行完成的，而 Generator 能够屡次暂停，让出控制权。

语法

学习 Generator 语法，你须要了解function* 、yield、next三个基本概念。

function* 用来声明一个函数是生成器函数，它比普通的函数声明多了一个*,*的位置比较随意能够挨着 function 关键字，也能够挨着函数名，看我的喜爱。

yield 产出的意思，这个关键字只能出如今生成器函数体内，可是生成器中也能够没有 yield 关键字，函数遇到 yield 的时候会暂停，并把 yield 后面的表达式结果抛出去。

next做用是将代码的控制权交还给生成器函数。

// 声明生成器函数
function* generator() {
    // A
    yield 'foo'
    // B
}
// 获取生成器对象
let g = generator();
// 第一个 next()，首次启动生成器
g.next(); // {value: "foo", done: false}
// 唤醒被 yield 暂停的状态
g.next();
// {value: undefined, done: true}

读完上面的代码有没有感受生成器好像个又懒又胖的人，每次必须推他一下才会走一点点，直到尽头。我对生成器的误解，生成器可能实际上超级屌的。

固然，生成器和迭代器有点暧昧的关系，好像生成器就是迭代器，尚未仔细学习过 Iterator，在此不展开，自行了解。

yield & next 生成器内外勾结

上面的代码片断，咱们知道了 next()的返回值的 value部分就是 yield 后面的表达式。实际上 next()也能够向生成器内部传递某些数据。

function* generator(txt) {
    console.log(txt); // 2
    let result01 = yield '我是一步';
    console.log(result01); // 4
    // return;
}

let g = generator('你是谁?');
console.log('对话开始~~'); // 1
let step01 = g.next();
console.log(step01.value);// 3
g.next('欢迎打赏')；
console.log('对话结束~~'); // 5

来来一图胜千言，我作了一个并不严谨的 low 图，😤真丑啊。对不对我也不能保证。

须要注意的一点是，第一个 next()只是为了启动生成器，若是你尝试给此处的它传递点东西是没用的。

经过上图，但愿读到这里的小伙伴理解了生成器的执行流程以及 yield 和 next 是如何相互传递数据的。

Generator 结合异步处理

开篇也说，Generator 是为了异步而生的，那咱们就简单看下如何进行异步处理。额，其实 async await 已经很完美了。

function* gen () {
  let url = 'https://api.github.com/users/github'
  let result = yield fetch(url)
  console.log(result.bio)
  // 请求2必须等请求1拿到结果，下面的代码是伪代码
  yield fetch('xxxxxx?name=' + result.bio)
}

let g = gen()
let result = g.next()

result
  .value
  .then(function (data) {
    return data.json()
  })
  .then(function (data) {
    g.next(data)
  })
  g.next();

写到这里有点感悟，普通函数一旦执行，函数外部是没法干预函数体内部的流程的只能等函数执行完成，而生成器函数经过 yield 和 next 相互传递数据能够控制函数体内的代码流程，忽然感受 Generator 并非一无可取呢~。异步代码参考了Promise,Generator（生成器）,async（异步）函数

其余

Generator 还有两点比较好玩的，异常处理，该部份内容请查阅阮一峰老师的文章自学。
生成器出了能够调用next()、还可使用 throw()、return()，也请自学。

资料推荐

ES6 中的生成器函数介绍
Javascript (ES6) Generators — Part I: Understanding Generators(图是今后处 copy 来的)
ES6 Generator介绍
经过ES6 Generator函数实现异步操做
总结一下ES6中promise、generator和async/await中的错误处理

🌚 前端学习QQ群: 538631558 🌚

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。