ES6(Generator)

简介: Generator1.基本概念异步编程的一种解决方案2.next 函数的用法见代码3.yield* 的用法见代码 一、基本定义2.使用 Generator 作为遍历器的返回值通过 Generator 函数的方式3.状态机有 A B C 三种状态去描述一个事物,A-B、B-C、C-A,永远不会与第四种状态,用 Generator 处理这种状态机是特别适用的。

Generator

1.基本概念

异步编程的一种解决方案

2.next 函数的用法

见代码

3.yield* 的用法

见代码

 

一、基本定义

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

通过 Generator 函数的方式

3.状态机

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

 

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

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

 

2.async

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

二、实例

1.抽奖(次数限制)

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

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

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

结果:

  

  

  

  

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

2.长轮询

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

1.长轮询

2.wordsocket(不常用)

 实例:

1.模拟 ajax 过程

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

结果:

若服务端返回数据为 1

 

则结果:

   ....

不断轮询

目录
相关文章
|
8月前
ES6 Generator 函数
ES6 Generator 函数
|
8月前
|
前端开发
ES6之生成器(Generator)
生成器(Generator)是ES6引入的一种特殊的函数,它可以通过yield关键字来暂停函数的执行,并返回一个包含value和done属性的对象。生成器的概念、作用和原理如下所述:
75 0
23 # generator 的使用
23 # generator 的使用
70 0
|
2月前
|
存储 JavaScript 前端开发
generator
【10月更文挑战第30天】Generator 为 JavaScript 中的异步编程和数据处理提供了一种优雅而强大的解决方案,它的暂停和恢复执行特性使得异步代码更易于理解和维护,同时在迭代器、可迭代对象和惰性求值等方面也有广泛的应用,能够提高代码的可读性、可维护性和性能。
|
3月前
|
自然语言处理 前端开发
如何理解 ES6 中 Generator ?
【10月更文挑战第7天】
|
6月前
|
JavaScript 前端开发 Python
Generator
【7月更文挑战第9天】
35 1
【Error】This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel
【Error】This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel
ES6学习(九)—Generator 函数的语法
ES6学习(九)—Generator 函数的语法
|
前端开发
【ES6新特性】— Generator
【ES6新特性】— Generator
96 0
|
API
ES6 从入门到精通 # 16:Generator 的应用
ES6 从入门到精通 # 16:Generator 的应用
103 0
ES6 从入门到精通 # 16:Generator 的应用

热门文章

最新文章