入门
简单来说,用法如下:
function* fn() { console.log(1); //暂停! yield; //调用next方法继续执行 console.log(2); } var iter = fn(); iter.next(); //1 iter.next(); //2
1、函数生成器特点是函数名前面有一个‘*’
2、通过调用函数生成一个控制器
3、调用next()方法开始执行函数
4、遇到yield函数将暂停
5、再次调用next()继续执行函数
消息传递
除了暂停和继续执行外,生成器同时支持传值。
用法如下:
function* fn() { var a = yield 'hello'; yield; console.log(a); } var iter = fn(); var res = iter.next(); console.log(res.value); //hello iter.next(2); iter.next(); //2
可以看到,yield后面有一个字符串,在第一次调用next时,暂停在这里且返回给了iter.next()。
而暂停的地方是一个赋值语句,需要一个变量给a,于是next()方法中传了一个参数2替换了yield,最后打印a得到了2。
异步应用
通过yield来实现异步控制流程:
function fn(a, b) { //假设这是一个ajax请求 ajax('url' + a + b, function(data) { //数据请求到会执行it.next it.next(data); }); } //这里是函数生成器 function* g() { //当异步操作完毕yield会得到值 //这里会自动继续执行 var text = yield fn(a, b); console.log(text); } var it = g(); it.next();
这里做了简化处理,忽略了一些错误处理。
确实很巧妙,通过回调函数来继续执行函数生成器,然后得到数据。
然而,直接在回调里拿数据不行么。书上讲,这样异步操作符合大脑思考模式,函数的执行看起来‘同步’了。
yield+promise
重点来了。
先回忆之前promise对异步的实现:
function request(url) { return new Promise(function(resolve, reject) { //ajax异步请求完成会调用resolve决议 ajax(url, resolve); }); } request('url').then(function(res) { console.log(res); })
流程大概是调用函数传入url,由于会立即决议,触发ajax请求函数。异步请求完调用调用回调函数,也就是resolve,然后根据返回的resolve调用then方法获取数据。
现在将yield与promise综合在一起:
function foo(x) { return request('url' + x); } //等待promise决议值返回 function* fn() { var text = yield foo(1); } var it = fn(); //返回一个promise var p = it.next().value; //对promise处理 p.then(function(text) { //这里继续执行生成器 it.next(text); })
封装
可以将上面的yield+promise进行封装,得到下面的函数:
function run(gen) { //获取除了生成器本身以外的参数 var args = [].slice.call(arguments, 1), it; //it = main() it = gen.apply(this, args); return Promise.resolve().then(function handleNext(value) { //第一次启动无value var next = it.next(value); return (function handleResult(next) { //执行完毕返回 if (next.done) { return next.value; } else { //如果还有就决议next.value传给handleNext return Promise.resolve(next.value).then(handleNext, function(err) {}); } })(next); }); } //这是一个函数生成器 function* main() { //... }; //该调用会自动异步运行直到结束 run(main);
如果有两个异步操作,获取到返回的两个数据后,再进行第三个异步操作,可以这么做:
function foo() { var p1 = request('url1'), p2 = request('url2'); //每一个request异步请求完成后会自动解除yield var r1 = yield p1, r2 = yield p2; var r3 = yield request('url3' + r1 + r2); console.log(r3); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗