异步编程中对Generator和thunk函数的认识

朴灿烈づ我的快乐病毒、 2022-11-04 11:12 14阅读 0赞

### 这里写目录标题 ###

*   *  什么是Generator 如何定义
     *  是怎么工作的
     *  Generator的内部构成
     *  与生成器的交互
     *  yield基本介绍
     *  什么是thunk函数
     *  thunk定义
     *  Generator和thunk如何结合

## 什么是Generator 如何定义 ##

Generator 是一个带星号的“函数”（它并不是真正的函数，下面的代码会为你验证），可以配合 yield 关键字来暂停或者执行函数。

function* gen() {
    
      console.log("enter");
    
      let a = yield 1;
    
      let b = yield (function () {return 2})();
    
      return 3;
    
    }
    
    var g = gen()           // 阻塞住，不会执行任何语句
    
    console.log(g.next())
    
    console.log(g.next())
    
    console.log(g.next())
    
    console.log(g.next()) 
    
    // output:
    
    // { value: 1, done: false }
    
    // { value: 2, done: false }
    
    // { value: 3, done: true }
    
    // { value: undefined, done: true }

## 是怎么工作的 ##

*  生成器不一定会执行生成器函数体，通过创建迭代器对象，可以与生成器通信
 *  迭代器用于控制生成器的执行。迭代对象暴露的最基本接口是next方法迭，这方法可以用来向生成器请求一个值， 从而控制生成器
 *  next函数调用后，生成器就开始执行代码，当代码执行到**yield**关键字时，就会生成一个中间结果(生成值序列中的一项)，然后返回一一个\*\*新对象，\*\*其电封装了结果健一个指示完成的指示器。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]
 *  每当生成一个当前值后，生成器就会非阻塞地**挂起执行**，随后**耐心等待**下一次值滑求的到达。这是普通函数完全不具有的强大特性，后续的例子中它还会起到更大的作用。

## Generator的内部构成 ##

我们已经知道了调用一个生 成器不会实际执行它。相反，它创建了一一个新的迭代器，通过该迭代器我们才能从生成器中请求值在生成器生成(或让渡)了一个值后，生成器会挂起执行并等待下一一个请求的到来。在某种方面来说，生成器的工作更像是一个小 程序，一个在状态中运 动的状态机。

*  挂起开始创建了一个生成器后，它最先以这种状态开始。其中的任何代码都未执行。
 *  执行生成器中的代码执行的状态。执行要么是刚开始，要么是从上次挂起的时候继续的。当生成器对应的迭代器调用了next方法，并且当前存在可执行的代码时，生成器都会转移到这个状态，
 *  挂起让渡——当生成器在执行过程中遇到了一个yield表达式，它会创建一个包含着返回值的新对象，随后再挂起执行。生成器在这个状态暂停并等待继续执行。
 *  完成——在生成器执行期间，如果代码执行到return 语句或者全部代码执行完毕，生成器就进入该状态。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]

## 与生成器的交互 ##

1.  作为生成器函数参数发送值
2.  使用next方法向生成器发送值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]

## yield基本介绍 ##

yield 同样也是 ES6 的新关键词，配合 Generator 执行以及暂停。yield 关键词最后返回一个迭代器对象，该对象有 value 和 done 两个属性，其中 done 属性代表返回值以及是否完成。yield 配合着 Generator，再同时使用 next 方法，可以主动控制 Generator 执行进度。

## 什么是thunk函数 ##

thunk函数的作用非常简单 其实就是把一个函数的 执行参数 和 回调分成两个函数(可以把函数本身也进行包装) 只要是有回调函数的 就可以用thunk进行包装

## thunk定义 ##

fn(args, callback)--->变成--->thunk(fn)(args)(callback)

## Generator和thunk如何结合 ##

因为thunk的执行函数和回调函数是分开的，会造成

1.  代码逻辑里面上面来说不符合常规逻辑
2.  回调函数里面嵌套逻辑处理太多的话，那thunk的优势就没了

执行函数执行-->等待回调函数传回数据-->用户对于获取的数据进行操作

1.  把所有的执行函数放入generator函数里面,利用generator函数的**yield对执行函数的流程控制**
2.  把函数执行权**移出**函数到对应的**回调函数**，获取数据后再把数据返回来
3.  等到下次再遇到next()函数，函数执行权又回到生成器

![在这里插入图片描述][20210302092048964.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]  
[参考][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221023/e95f68ab043d455e8a314c5053bf07cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/28199ba0efe04b8c91de3df1418420a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: /images/20221023/bc589468469343d79a4d53bbc173ef20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: /images/20221023/ae80d3e52de748ad942b8836ca88a784.png
[20210302092048964.png]: /images/20221023/9b9d66c85fc945ae8e4a16eea2a8f8ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 3]: /images/20221023/11d238f01a3042b1861e9e60dad34ce1.png
[Link 1]: https://cnodejs.org/topic/57c95bb86f7069ce262d0531