Generator函数异步应用

转载请注明出处: Generator函数异步应用

上一篇文章详细的介绍了Generator函数的语法，这篇文章来说一下如何使用Generator函数来实现异步编程。

或许用Generator函数来实现异步会很少见，因为ECMAScript 2016的async函数对Generator函数的流程控制做了一层封装，使得异步方案使用更加方便。

但是呢，我个人认为学习async函数之前，有必要了解一下Generator如何实现异步，这样对于async函数的学习或许能给予一些帮助。

文章目录

  1. 知识点简单回顾
  2. 异步任务的封装
  3. thunk函数实现流程控制
  4. Generator函数的自动流程控制
  5. co模块的自动流程控制

知识点简单回顾

在Generator函数语法解析篇的文章中有说到，Generator函数可以定义多个内部状态，同时也是遍历器对象生成函数。yield表达式可以定义多个内部状态，同时还具有暂停函数执行的功能。调用Generator函数的时候，不会立即执行，而是返回遍历器对象。

遍历器对象的原型对象上具有next方法，可以通过next方法恢复函数的执行。每次调用next方法，都会在遇到yield表达式时停下来，再次调用的时候，会在停下的位置继续执行。调用next方法会返回具有value和done属性的对象，value属性表示当前的内部状态，可能的值有yield表达式后面的值、return语句后面的值和undefined；done属性表示遍历是否结束。

yield表达式默认是没有返回值的，或者说，返回值为undefined。因此，想要获得yield表达式的返回值，就需要给next方法传递参数。next方法的参数表示上一个yield表达式的返回值。因此在调用第一个next方法时可以不传递参数(即使传递参数也不会起作用)，此时表示启动遍历器对象。所以next方法会比yield表达式的使用要多一次。

更加详细的语法可以参考这篇文章。传送门：Generator函数语法解析

异步任务的封装

yield表达式可以暂停函数执行，next方法可以恢复函数执行。这使得Generator函数非常适合将异步任务同步化。接下来会使用setTimeout来模拟异步任务。

const person = sex => {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      const data = {
        sex,
        name: ‘keith‘,
        height: 180
      }
      resolve(data)
    }, 1000)
  })
}
function *gen () {
  const data = yield person(‘boy‘)
  console.log(data)
}
const g = gen()
const next1 = g.next() // {value: Promise, done: false}
next1.value.then(data => {
  g.next(data)
})

从上面代码可以看出，第一次调用next方法时，启动了遍历器对象，此时返回了包含value和done属性的对象，由于value属性值是promise对象，因此可以使用then方法获取到resolve传递过来的值，再使用带有data参数的next方法给上一个yield表达式传递返回值。

此时在const data = yield person()这句语句中，就可以得到异步任务传递的参数值了，实现了异步任务的同步化。

但是上面的代码会有问题。每次获取异步的值时，都要手动执行以下步骤

const g = gen()
const next1 = g.next() {value: Promise, done: false}
next1.value.then(data => {
  g.next(data)
})

上面的代码实质上就是每次都会重复使用value属性值和next方法，所以每次使用Generator实现异步都会涉及到流程控制的问题。每次都手动实现流程控制会显得麻烦，有没有什么办法可以实现自动流程控制呢？实际上是有的: )

thunk函数实现流程控制

thunk函数实际上有些类似于JavaScript函数柯里化，会将某个函数作为参数传递到另一个函数中，然后通过闭包的方式为参数(函数)传递参数进而实现求值。

函数柯里化实现的过程如下

function curry (fn) {
  const args1 = Array.prototype.slice.call(arguments, 1)
  return function () {
    const args2 = Array.from(arguments)
    const arr = args1.concat(args2)
    return fn.apply(this, arr)
  }
}

使用curry函数来举一个例子: )

// 需要柯里化的sum函数
const sum = (a, b) => {
  return a + b
}
curry(sum, 1)(2)   // 3

而thunk函数简单的实现思路如下：

// ES5实现
const thunk = fn => {
  return function () {
    const args = Array.from(arguments)
    return function (callback) {
      args.push(callback)
      return fn.apply(this, args)
    }
  }
}

// ES6实现
const thunk = fn => {
  return function (...args) {
    return function (callback) {
      return fn.call(this, ...args, callback)
    }
  }
}

从上面thunk函数中，会发现，thunk函数比函数curry化多用了一层闭包来封装函数作用域。

使用上面的thunk函数，可以生成fs.readFile的thunk函数。

const fs = require(‘fs‘)
const readFileThunk = thunk(fs.readFile)
readFileThunk(fileA)(callback)

使用thunk函数将fs.readFile包装成readFileThunk函数，然后在通过fileA传入文件路径，callback参数则为fs.readFile的回调函数。

当然，还有一个thunk函数的升级版本thunkify函数，可以使得回调函数只执行一次。原理和上面的thunk函数非常像，只不过多了一个flag参数用于限制回调函数的执行次数。下面我对thunkify函数做了一些修改。源码地址: node-thunkify

const thunkify = fn => {
  return function () {
    const args = Array.from(arguments)
    return function (callback) {
      let called = false
      // called变量限制callback的执行次数
      args.push(function () {
        if (called) return
        called = true
        callback.apply(this, arguments)
      })
      try {
        fn.apply(this, args)
      } catch (err) {
        callback(err)
      }
    }
  }
}

举个例子看看: )

function sum (a, b, callback) {
  const total = a + b
  console.log(total)
  console.log(total)
}

// 如果使用thunkify函数
const sumThunkify = thunkify(sum)
sumThunkify(1, 2)(console.log)
// 打印出3

// 如果使用thunk函数
const sumThunk = thunk(sum)
sumThunk(1, 2)(console.log)
// 打印出 3, 3

再来看一个使用setTimeout模拟异步并且使用thunkify模块来完成异步任务同步化的例子。

const person = (sex, fn) => {
  window.setTimeout(() => {
    const data = {
      sex,
      name: ‘keith‘,
      height: 180
    }
    fn(data)
  }, 1000)
}
const personThunk = thunkify(person)
function *gen () {
  const data = yield personThunk(‘boy‘)
  console.log(data)
}
const g = gen()
const next = g.next()
next.value(data => {
  g.next(data)
})

从上面代码可以看出，value属性实际上就是thunkify函数的回调函数(也是person的第二个参数)，而‘boy‘则是person的第一个参数。

Generator函数的自动流程控制

在上面的代码中，我们可以将调用遍历器对象生成函数，返回遍历器和手动执行next方法以恢复函数执行的过程封装起来。

const run = gen => {
  const g = gen()
  const next = data => {
    let result = g.next(data)
    if (result.done) return result.value
    result.value(next)
  }
  next()
}

使用run函数封装起来之后，run内部的next函数实际上就是thunk(thunkify)函数的回调函数了。因此，调用run即可实现Generator的自动流程控制。

const person = (sex, fn) => {
  window.setTimeout(() => {
    const data = {
      sex,
      name: ‘keith‘,
      height: 180
    }
    fn(data)
  }, 1000)
}
const personThunk = thunkify(person)
function *gen () {
  const data = yield personThunk(‘boy‘)
  console.log(data)
}
run(gen)
// {sex: ‘boy‘, name: ‘keith‘, height: 180}

有了这个执行器，执行Generator函数就方便多了。不管内部有多少个异步操作，直接把Generator函数传入run函数即可。当然，前提是每一个异步操作，都要是thunk(thunkify)函数。也就是说，跟在yield表达式后面的必须是thunk(thunkify)函数。

const gen = function *gen () {
  const f1 = yield personThunk(‘boy‘) // 跟在yield表达式后面的异步行为必须使用thunk(thunkify)函数封装
  const f2 = yield personThunk(‘boy‘)
  // ...
  const fn = yield personThunk(‘boy‘)
}
run(gen)  // run函数的自动流程控制

上面代码中，函数gen封装了n个异步行为，只要执行run函数，这些操作就会自动完成。这样一来，异步操作不仅可以写得像同步操作，而且一行代码就可以执行。

co模块的自动流程控制

在上面的例子说过，表达式后面的值必须是thunk(thunkify)函数，这样才能实现Generator函数的自动流程控制。thunk函数的实现是基于回调函数的，而co模块则更进一步，可以兼容thunk函数和Promise对象。先来看看co模块的基本用法

const co = require(‘co‘)
const gen = function *gen () {
  const f1 = yield person(‘boy‘) // 调用person，返回一个promise对象
  const f2 = yield person(‘boy‘)
}
co(gen)   // 将thunk(thunkify)函数和run函数封装成了co模块，yield表达式后面可以是thunk(thunkify)函数或者Promise对象

co模块可以不用编写Generator函数的执行器，因为它已经封装好了。将Generator函数co模块中，函数就会自动执行。

co函数返回一个Promise对象，因此可以用then方法添加回调函数。

co(gen).then(function (){
  console.log(‘Generator 函数执行完成‘)
})

co模块原理；co模块其实就是将两种自动执行器(thunk(thunkify)函数和Promise对象)，包装成一个模块。使用co模块的前提条件是，Generator函数的yield表达式后面，只能是thunk(thunkify)或者Promise对象，如果是数组或对象的成员全部都是promise对象，也可以使用co模块。

基于Promise对象的自动执行

还是使用上面例子，不过这次是将回调函数改成Promise对象来实现自动流程控制。

const person = (sex, fn) => {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      const data = {
        name: ‘keith‘,
        height: 180
      }
      resolve(data)
    }, 1000)
  })
}
function *gen () {
  const data = yield person(‘boy‘)
  console.log(data)   // {name: ‘keith‘, height: 180}
}
const g = gen()
g.next().value.then(data => {
  g.next(data)
})

手动执行实际上就是层层使用then方法和next方法。根据这个可以写出自动执行器。

const run = gen => {
  const g = gen()
  const next = data => {
    let result = g.next(data)
    if (result.done) return result.value
    result.value.then(data => {
      next(data)
    })
  }
  next()
}
run(gen)  // {name: ‘keith‘, height: 180}

如果对co模块感兴趣的朋友，可以阅读一下它的源码。传送门：co

关于Generator异步应用的相关知识也就差不多了，现在稍微总结一下。

  1. 由于yield表达式可以暂停执行，next方法可以恢复执行，这使得Generator函数很适合用来将异步任务同步化。
  2. 但是Generator函数的流程控制会稍显麻烦，因为每次都需要手动执行next方法来恢复函数执行，并且向next方法传递参数以输出上一个yiled表达式的返回值。
  3. 于是就有了thunk(thunkify)函数和co模块来实现Generator函数的自动流程控制。
  4. 通过thunk(thunkify)函数分离参数，以闭包的形式将参数逐一传入，再通过apply或者call方法调用，然后配合使用run函数可以做到自动流程控制。
  5. 通过co模块，实际上就是将run函数和thunk(thunkify)函数进行了封装，并且yield表达式同时支持thunk(thunkify)函数和Promise对象两种形式，使得自动流程控制更加的方便。

参考资料

  1. Generator 函数的异步应用
  2. node-thunkify
  3. co

原文地址：https://www.cnblogs.com/unclekeith/p/8335279.html

时间： 2024-10-08 10:09:10

Generator函数异步应用的相关文章

js-ES6学习笔记-Generator函数的异步应用

1.ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个全新的阶段. 2.所谓"异步",简单说就是一个任务不是连续完成的,可以理解成该任务被人为分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段. 3.JavaScript 语言对异步编程的实现,就是回调函数.所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候

Generator 函数的异步应用

异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是"单线程"的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Generator 函数如何完成异步操作. 传统方法 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个全新的阶段. 基本概念 异步 所谓"异步",简单说就是一个任务不是连续完成的,可以理解成

使用Generator函数进行异步编程

Generator函数在工作中还没有用到过,一直在使用async,最近在看async的原理,发现它只是Generator的语法糖. Generator的基础知识之前写过文章介绍过(https://www.cnblogs.com/wangtingnoblog/p/js_Generator.html),这里主要讨论一下怎么使用Generator函数来进行异步编程. 先来看下面的代码: 1 function* g() { 2 console.log('g start') 3 yield setTime

ES6的Generator函数

1.简介 Generator函数是一个函数的内部状态的遍历器(也就是说,Generator函数是一个状态机). 形式上,Generator函数是一个普通函数,但是有两个特征. function命令与函数名之间有一个星号*: 函数体内部使用yield语句,定义遍历器的每个成员,即不同的内部状态. function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } let hw = helloWorld

js-ES6学习笔记-Generator函数

1.Generator 函数是 ES6 提供的一种异步编程解决方案.形式上,Generator 函数是一个普通函数,但是有两个特征.一是,function关键字与函数名之间有一个星号:二是,函数体内部使用yield语句,定义不同的内部状态. 2.Generator函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号.不同的是,调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象,也就是上一章介绍的遍历器对象(Iterator Object

generator函数

function* gen(x){ var y = yield x + 2; return y; } var g = gen(1); g.next() // { value: 3, done: false } g.next() // { value: undefined, done: true } Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权(即暂停执行). 异步操作需要暂停的地方,都用 yield 语句注明. Generator 函数不同于普通函数,即执行

Generator函数语法解析

转载请注明出处: Generator函数语法解析 Generator函数是ES6提供的一种异步编程解决方案,语法与传统函数完全不同.以下会介绍一下Generator函数. 写下这篇文章的目的其实很简单,是想梳理一下自己对于Generator的理解,同时呢,为学习async函数做一下知识储备. Generator函数 基本概念 yield表达式 next方法 next方法的参数 yield*表达式 与Iterator接口的关系 for...of循环 作为对象属性的Generator函数 Gener

async函数对比Generator函数

首先定义一个读取文件的异步函数 var readFile = function(fileName){ return new Promise((resolve,reject)=>{ fs.readFile(filename,(data,data)=>{ if(error) reject(error); resolve(data)l }) }) } var gen = function* (){ var f1 = yield readFile("./ect") var f2 =

Generator函数的理解和使用

原文:https://blog.csdn.net/ganyingxie123456/article/details/78152770 Generator函数的理解和使用 Generator 函数是 ES6 提供的一种异步编程解决方案. 一.异步编程 1.所谓"异步",简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段. 2.异步编程方式: (1)回调函数 (2)事件监听 (3)发布/订阅者 (4)Promise对象 3.所谓回调函数,就是把