让 Generator 自启动

junbaor 发布于2019-08-19 18:46 / 3171人阅读

摘要：文章同步自个人博客此前只是简单使用而没有真正的去研究，这次要好好折腾下这货。我们要实现一个启动器来运行它，并把结果传给下一次，这样就实现了接收值的功能。就启动起来了，并且一直执行到为为止。如果执行不了，请升级浏览器，本例在下通过。

文章同步自个人博客：http://www.52cik.com/2016/07/11/generator-co.html

此前只是简单使用而没有真正的去研究 Generator，这次要好好折腾下这货。

异步编程

对于 jser 来说，异步非常熟悉了吧，但是真正理解异步的却不多，因为大部分人只知道回调。
随着js的快速发展，异步方案也层出不穷，从最开始的回调到Promise，再到Generator，然后到async/await。
甚至有人说 async/await 是异步的终极解决方案，我不敢直接赞同，只能说是目前最好的异步体验。
本篇先从 Generator 讲起，后序再详细说 async/await。

从回调开始

从最最经典的 ajax 请求开始今天的话题吧。
假如，我们要依次请求 url1, url2, url3 这3个地址。

$.get("url1", function(r1) {
  $.get("url2", function(r2) {
    $.get("url3", function(r3) {
      console.log(r1, r2, r3);
    });
  });
});

一不小心就写成这样了。
如果你是 jQuery 粉的话，你可能会说也可以这样实现啊。

$.get("url1").then(function(r1) {
  console.log(r1);
  return $.get("url2");
}).then(function(r2) {
  console.log(r2);
  return $.get("url3");
}).then(function(r3) {
  console.log(r3);
});

用 jQuery 的 Deferred 对象，类似 Promise 来规避回调地狱，看着确实平了，但体验并不是特别友好。

用 Generator 来和谐回调

Generator 的基础这里就不展开说了，直接说应用。

function* gen() {
  var r1 = yield $.get("url1");
  var r2 = yield $.get("url2");
  var r3 = yield $.get("url3");

  console.log(r1, r2, r3);
}

这是比较友好的异步方式，但是还有个至关重要的因素，怎么运行这个 Generator 是个问题。
直接手动 g.next() 运行那肯定不行，鬼知道有多少个 yield。
我们要实现一个启动器来运行它，并把 Promise 结果传给下一次next，这样就实现了 yield 接收值的功能。

先来实现一个最简陋的起动器。

function run(gen) {
  var g = gen();

  function next(d) {
    var r = g.next(d);
    r.done || r.value.then(function(d){ next(d) }); // 这个是关键，把值传回传
  }

  next();
}

然后我们只要一行代码。

run(gen);

Generator 就启动起来了，并且一直执行到 done 为 true 为止。

真实例子

打开 http://www.52tian.net/ 动漫网。非广告，确实没找到合适的测试站，凑合下吧。
然后把下面代码贴到控制台，看下结果。如果执行不了，请升级浏览器，本例在 chrome 51 下通过。

function* gen() {
  var r1 = yield $.get("/json/anime/4126.htm");
  var r2 = yield $.get("/json/anime/11129.htm");
  var r3 = yield $.get("/json/anime/427.htm");

  console.log([r1, r2, r3].join("
"));
}

function run(gen) {
  var g = gen();

  function next(d) {
    var r = g.next(d);
    r.done || r.value.then(function(d){ next(d) }); // 这个是关键，把值传回传
  }

  next();
}

run(gen);

小结

可能你已经发现了，其实这就是 co 的原理，但 co 比这个例子严谨多了，而且api设计的也非常友好。
本篇到此也就结束了，利用 Generator 的 yield 功能实现参数回传，让代码看起来非常‘同步’，让异步体验变的更加友好。

GPU云服务器云服务器自启动设置电脑自启动开机自启动 ubuntu自启动

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

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

自定义前端构建工具生成器 generator-pg-cloud

摘要：自定义前端构建工具生成器近期公司前端一直在做效率提升，流程优化，很荣幸这个担子落在了我身上，除了一些培训，分享之外，自己弄了个基于的前端构建环境生成器，在此分享给大家，觉得有用的请试用。，不出意料的话，构建环境已经生成完毕了。自定义前端构建工具生成器generator-pg-cloud 近期公司前端一直在做效率提升，流程优化，很荣幸这个担子落在了我身上，除了一些培训，分享之外，自己...

snowell 2019-08-21 10:34 评论0 收藏0
通过ES6 Generator函数实现异步流程

摘要：换句话说，我们很好的对代码的功能关注点进行了分离通过将使用消费值得地方函数中的逻辑和通过异步流程来获取值迭代器的方法进行了有效的分离。但是现在我们通过来管理代码的异步流程部分，我们解决了回调函数所带来的反转控制等问题。本文翻译自 Going Async With ES6 Generators 由于个人能力知识有限，翻译过程中难免有纰漏和错误，还望指正Issue ES6 Gener...

刘厚水 2019-08-21 12:01 评论0 收藏0
async 更优雅异步体验

摘要：文章同步自个人博客上一篇让自启动介绍了通过起动器让跑起来，而本篇采用实现更优雅的异步编程。而采用写，代码则是直接运行即可直接运行了，无须写生成器来运行了，而代码仅仅是改为改为而已。不过效果确实非常好，让异步编程更加的同步了。文章同步自个人博客：http://www.52cik.com/2016/07/11/generator-co.html 上一篇《让 Generator 自启动》介...

Ajian 2019-08-19 18:46 评论0 收藏0
yeoman-generator 入门教程

摘要：上下文路径为了方便文件流的输入输出，使用两种位置环境。目标上下文目标上下文定义为当前工作目录或含文件最接近的父文件夹。这确保了用户行为的一致。帮助用户严重需要覆盖的内容。摘要随着 Web 2.0 和 HTML 5 的流行，现在的 Web 应用所能提供的功能和交互能力比之前传统的 Web 应用要强大很多。应用的很多实现逻辑被转移到了浏览器端来实现。浏览器不再只提供单一的数据接收和展现...

caiyongji 2019-08-19 18:39 评论0 收藏0