第三章:ES6详解(generator)

程序员也可以有艺术人生,大家好我是超人不会飞

初始generator

generator可以翻译为生成,所以一般我们将generator称为生成器.
说白点,就是我们可以靠一个generator生成一堆东西.

generator是一个函数,是一个特殊的函数. 那么它和普通的函数有什么区别?

普通函数,你运行了这个函数,函数内部就不会停.直到这个函数结束.
generator这个函数特殊之处就是--中间可以停.

先用小demo来说明这个问题

  
结果
弹出 a, 如果执行2次next会弹出 a b

上面这个函数就是generator函数.

1. 有一个 , 可以写成 (function show) (function * show) (function *show)
2. 执行show()函数不成功,因为show()函数返回的是一个generator对象.
3. next()执行下一步,遇见yield停止.

gengrator最简单的来说,就是踹一步走一步.
你的yield放到哪里它就停到哪里.

接下来的问题? 它停了有什么作用,在具体项目中的用处?
可以用出租车举例,你在途中突然渴了,让出租车等你2分钟出去买个水.然后继续走.
特别是个一个场景.
比如说:你需要请求数据,请求数据都是需要时间的一个过程.可以用fiels暂停,等待数据到来.

上面的伪代码是generator最简单的东西,就是执行到yield后 请求数据,然后数据回来再执行代码.

理解generartor-生成器.
其实它的背后是将generator函数生成了多个小函数.如:

        function *show() {
            alert('a');
            yield;
            alert('b');
        }

上面show函数被解析成了2个小函数.当然这些函数你是看不见的.

开始说yield开始说是generator中最好不好理解的一个东西了.
把它掌握就能说明你对generator掌握的是好是坏.比较重要.

generator中的yield到底是个什么?

yield是一个很有意思的东西,它既可以传参,可以返回

传参

image.png

上面的输出结果是: alert(a) 的结果为5
next函数传参就是给field传参,但是你只记住一点,第一个next传参没用.如图解.不要较真,记住就行.

返回

image.png

image.png

通过实例我们来深入的认识generator

generator也是解决异步操作的.
1.现在桌面上下载个小组件库

彬@TB MINGW64 ~/Desktop
$ npm i yield-runner-blue

generator的好处就是能让你写同步操作一样去写异步操作.
异步操作:
1.回调
2.Promise
3.generator
4....

//回调(最经典的写法)

$.ajax({
  url : xxx,
  dataType : 'json',
  success(data1) {
      $.ajax({
        url : xxx,
        dataType : 'json',
        success(data1) {
  
        },
      });
  },
  error(err) {

  }
});

//Promise

Promise.all([
  $.ajax({url:'', dataType:'json'}),
  $.ajax({url:'', dataType:'json'}),
  $.ajax({url:'', dataType:'json'}),
]).then(results=>{
  console.log('ok')
},err=>{
  console.log('错了');
})

//generator

image.png

Promise 与 generator 的区别.
1.generator适合带逻辑的读取, 比如它的第2次请求会根据第一次的请求返回的数据类型来进行第二次请求.因此Promise的缺点就是只能请求板上钉钉的事情,不能带逻辑.如果硬要用Promise也可以.
2.Promise适合读取一堆没有逻辑的数据
3.generator适合去读取一堆带有逻辑的数据
//带逻辑-Promise

Promise.all([
  $.ajax({'url':'getUserData',dataType:'json'})
]).then(results=>{
    if(results.type == VIP) {
      Promise.all([
        $.ajax({'url':'getItems', dataType:'json'})
      ]).then(.........)
    }
  },err=>{
  console.log('错了')
})
分析: 上面带逻辑的promise已经跟经典的回调没有什么太大的区别.

//带逻辑-generator
提醒:generator不能用箭头函数的方式去书写
generator其实也是对promise小小的封装.

image.png

generator实例

generator在另外一个框架也有用到,就是KOA,KOA是nodeJS的框架
首先下载koa

引入:
const koa = require('koa');

创建服务:

let server =new koa();

监听:

server.listen(8080);

如何用:

server.use(function *(){
  //向外输出
  this.body = 'abc';
})

image.png

与koa配套的有koa-mysql
安装

npm i koa-mysql

引入

const mysql = require('koa-mysql');

image.png

image.png

以上的generator实例知识个简单的说明,因为koa里面已经废除了generator.知识个思路看看.