vue项目中使用generator函数

先来解释下什么叫generator函数*

语法上,可以把理解成,Generator 函数是一个状态机,封装了多个内部状态。

形式上,Generator 函数是一个普通函数。

整个Generator函数就是一个封装的异步任务,或者说是异步任务的容器,异步操作需要暂停的地方,都用yield语句。

Generator函数特征:

(1)function 关键字和函数之间有一个星号(*),且内部使用yield表达式,定义不同的内部状态。

(2)调用Generator函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象。

最近看了这个generator函数所以有点想法,对比于我现在用的vue项目中经常要实现的执行一个方法,但是出于产品需求,必须要去处理别的事情再回来处理这个方法,说得有点笼统。就比如说(在vue环境中)我要实现一个方法
html中<h1 @click=“go”> test
js中:methods:{
go(){
console.log(1+1)
// 不知道要不要执行下面的步骤
console.log(1+2)
}

}
在实现go函数 console.log(1+1) 的时候想让用户确定是否要执行下一步,这时候要先弹个弹窗出来让用户决定是否要执行console.log(1+2),如果在弹窗点取消那就不执行 点确定就执行,那么这个console.log(1+2)就要搬到另外的函数中去执行,当然,这里没有什么其他逻辑要处理所以搬到另外的函数去执行也是没区别的,这里我想阐述的只是这个模式,就是想执行完console.log(1+1)时弹个弹窗,在弹窗中的操作还可以在这个go函数中继续往下处理
那么就是用到这次的generator函数了
methods:{
* go(){
console.log(1+1)
yield ‘第一次调用’
// 不知道要不要执行下面的步骤
console.log(1+2)
yield ‘第二次调用’
}

}
弹窗中点确定的时候就执行go().next()就能执行console.log(1+2)了,如果点取消就不执行
是不是就很方便了啊,不用再开一个函数去处理完再回来这里处理了,话不多说,截点图理解更清晰点
这个是代码
这个是代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值