ES6(Generator)

Generator

1.基本概念

异步编程的一种解决方案

2.next 函数的用法

见代码

3.yield* 的用法

见代码

 

一、基本定义

ES6(Generator)ES6(Generator)

2.使用 Generator 作为遍历器的返回值

通过 Generator 函数的方式

ES6(Generator)ES6(Generator)

3.状态机

有 A B C 三种状态去描述一个事物,A-B、B-C、C-A,永远不会与第四种状态,用 Generator 处理这种状态机是特别适用的。

 ES6(Generator)ES6(Generator)

1.调用 let 方法运行第一个 yield  2.next 到 yield 'B'  3.再next 到 yield ‘C’ 4.应为是 while(1),所以又回到 Yield 'A'.

通过这种方式即可不断的获取状态机当前的状态

 

2.async

ES6(Generator)ES6(Generator)

async 是 Generator 的语法糖(结果与上述相同)

二、实例

1.抽奖(次数限制)

ES6(Generator)

while (count>0)   (对抽奖次数的限制)

yield draw(count)  (具体的操作逻辑)

 let star =residue(5)   (将 Generator 实例化,实际中的参数应为后台传输来的)

结果:

ES6(Generator)  ES6(Generator)

ES6(Generator)  ES6(Generator)

ES6(Generator)  ES6(Generator)

ES6(Generator)  ES6(Generator)

ES6(Generator)   ES6(Generator)(继续点击无用,不再执行)

2.长轮询

服务端的某个服务状态定期变化,前端需要定时获取这个服务端状态,应为 http 是无状态的,不知道其连接,实时取到这种服务器变化有两种方式:

1.长轮询

2.wordsocket(不常用)

 实例:

1.模拟 ajax 过程

ES6(Generator)

2.轮询过程(执行后端通信)

ES6(Generator)

结果:

ES6(Generator)

若服务端返回数据为 1

 ES6(Generator)

则结果:

ES6(Generator)  ES6(Generator) ....

不断轮询

上一篇:ES6(对象(object)新增特性)


下一篇:ES6(Proxy 和 Reflect)