Generator 函数的异步应用大概介绍

Generator 函数的异步应用

1.0 传统方法

ES6 诞生以前, 异步编程的方法, 大概有下面四种.

• 回调函数
• 事件监听
• 发布/订阅
• Promise对象

Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。

2.0 基本概念

1. 异步

   所谓"异步"，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段

2. 回调函数

JavaScript 语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。回调函数的英语名字callback，直译过来就是"重新调用"。

fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
  if (err) throw err;
  console.log(data);
});

上面代码中，readFile函数的第三个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了/etc/passwd这个文件以后，回调函数才会执行。

问题: 函数嵌套太多, 容易形成回调地狱, 不方便代码阅读

3. Promise

回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。

Promise 对象就是为了解决这个回调地狱的问题而提出的,它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。

问题: Promise 的最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。

3.0 Generator 函数

1. 协程

   协程"（coroutine），意思是多个线程互相协作，完成异步任务。

   协程有点像函数，又有点像线程。它的运行流程大致如下。

   • 第一步，协程A开始执行。
   • 第二步，协程A执行到一半，进入暂停，执行权转移到协程B。
   • 第三步，（一段时间后）协程B交还执行权。
   • 第四步，协程A恢复执行。

   上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。

   举例来说，读取文件的协程写法如下。

   function* asyncJob() {
     // ...其他代码
     var f = yield readFile(fileA);
     // ...其他代码
   }
   

   上面代码的函数asyncJob是一个协程，它的奥妙就在其中的yield命令。它表示执行到此处，执行权将交给其他协程。也就是说，yield命令是异步两个阶段的分界线。

   协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。

2. Generator函数异步封装

下面看看如何使用 Generator 函数，执行一个真实的异步任务

var fetch = require('node-fetch');

function* gen(){
  var url = 'https://api.github.com/users/github';
  var result = yield fetch(url);
  console.log(result.bio);
}

上面代码中，Generator 函数封装了一个异步操作，该操作先读取一个远程接口，然后从 JSON 格式的数据解析信息。就像前面说过的，这段代码非常像同步操作，除了加上了yield命令。

执行这段代码的方法如下。

var g = gen();
var result = g.next();

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

上面代码中，首先执行 Generator 函数，获取遍历器对象，然后使用next方法（第二行），执行异步任务的第一阶段。由于Fetch模块返回的是一个 Promise 对象，因此要用then方法调用下一个next方法。

问题: 可以看到，虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。

总结:

上一章: Generator函数的语法, yield表达式, next方法理解

下一章: async函数的介绍, await命令解释及注意问题

交流学习添加微信(备注技术交流学习): Gene199302

该博客为学习阮一峰 ES6入门课所做的笔记记录, 仅用来留作笔记记录和学习理解