ES6 Generator函数的应用实例分析
网络编程 2021-07-04 15:51www.168986.cn编程入门
这篇文章主要介绍了ES6 Generator函数的应用,结合实例形式分析了ES6 Generator函数异步操作与异常捕获相关使用技巧,需要的朋友可以参考下
本文实例讲述了ES6 Generator函数的应用。分享给大家供大家参考,具体如下
Generator 函数是 一种异步编程解决方案,Generator 函数会返回一个遍历器对象,Generator 函数是一个普通函数,有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式。
认识generator函数
function fn() { console.log('hello'); return 'Joh'; } // 执行fn()时不会直接执行方法体中的代码,它会返回一个指针, 这个指针实现了 interator接口,也就是返回一个interator对象 let it = fn(); // 通过调用next就会执行方法体, 返回结果是 {value:'Joh', done:true}, 其中next返回的是函数体中return的值 let res = it.next(); console.log(res);
generator函数中的yield 与 return
function fn() { // 和yield相配合,把一个generator内部分为几个断点来执行,每个断点就是yield语句 // 注意 yield和return的区别 yield可以有多个,return只能有1个 yield 1; yield 2; yield 3; return 4; // 可以没有return值,done为true的value将会是undefined } let it = fn(); // 在for-of 循环中只能打印done为false的value值,done为true时,程序终止 for(let v of it) { console.log(v); // 分别输出 1 2 3 }
yield 的值与赋值语句
function fn(_name) { let name = yield _name; // yield 的默认值为undefined return name; } let it = fn('Joh'); console.log(it.next()); // {value:'Joh', done:false} console.log(it.next('Tom')); // {value:'Tom', done:true} // 此处value应该为undefined,通过next参数的形式赋值改变了一个值 console.log(it.next('Lily')); // {value: undefined, done:true} // 已经循环完毕,即使传值也是undefined
yield 语句的位置与括号
function sum(a, b) { return a + b; } function fn() { let res = sum(yield 1, 5 + (yield 3)); console.log(res); console.log('my qq: ' + (yield qq)); // yield 在一个语句中需要括起来 } fn();
yield 异常捕获
异常捕获的方式1
function fn() { let qq = yield; // yield 默认返回undefined, 不会抛出异常 console.log(qq); } let g = fn(); g.next(); // 第一个断点没有输出 // g.next('qq 11111'); // 完毕之后传值输出qq 11111 g.throw('error!'); // Uncaught error!
异常捕获的方式2
function fn() { let qq; try { qq = yield; // yield 默认返回undefined }catch(e){ console.log('qq have error'); }finally{ console.log(qq); } } let g = fn(); g.next(); g.throw('error!'); // qq have error // undefined
异常捕获的方式3
function fn() { let qq; qq = yield; console.log(qq); } let g = fn(); g.next(); try{ g.throw('error!'); }catch(e){ console.log('qq have error!'); }
异常捕获的方式4:
function fn() { let qq; try { qq = yield ff; // ff 未定义, 所以qq不会被正确赋值 此处是非 yield 的异常 }catch(e){ console.log('err1'); } console.log(qq); } let g = fn(); g.next(); g.next('qq 5554'); // err1 // undefined
利用generator和promise结合使用,让异步的逻辑关系,使用同步的方式书写
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function fn() { console.log(yield asyncF('Joh')); } let gf = fn(); function exec(gf,value) { let res = gf.next(value); if(!res.done) { if(res.value instanceof Promise) { res.value.then(function (v) { exec(gf, v); }) }else{ exec(gf, res.value); } } } exec(gf); // my name is Joh
更复杂的写法
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function fn(name) { if((yield sum(3,5)) > 6) { console.log(yield asyncF(name)); }else{ console.log('error'); } } let gf = fn('Joh'); // generator 执行器 相当于 tj/co 模块 function exec(gf,value) { let res = gf.next(value); if(!res.done) { if(res.value instanceof Promise) { res.value.then(function (v) { exec(gf, v); }) }else{ exec(gf, res.value); } } } exec(gf); // my name is Joh
使用纯promise实现
function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function fn(name) { sum(3,5) .then(function (num) { if(num > 6) { asyncF(name) .then(function (v) { console.log(v); }) }else{ console.log('error'); } }) } fn('Joh');
使用co模块,来代替自己写的执行器
var co = require('co'); function asyncF(name) { return new Promise(function(resolve){ setTimeout(function(){ resolve('my name is ' + name); }); }); } function sum(a, b) { return new Promise(function (resolve) { setTimeout(function () { resolve(a + b); }); }) } function fn(name) { if((yield sum(3,5)) > 6) { console.log(yield asyncF(name)); }else{ console.log('error'); } } var fnx = co.wrap(fn); fnx('Joh'); // my name is Joh
更多关于JavaScript相关内容可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇:js设置鼠标悬停改变背景色实现详解
下一篇:vue实现简单的日历效果
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程