Generator异步解决方案详解

一:三种常见的异步解决方案

  • Promise:链式编程
  • async:使用 async 去修饰函数,然后使用 await 去等待成功
  • Generator:使用 * 修饰函数,然后使用 yield 去等待成功

通俗来讲,Generator 类似于 Promise 到 async 的过渡态。其既可以链式编程,也有 * 修饰符与 yield 暂停等待。当然在项目开发中还是 async 更为常用与便捷。

二:Generator核心语法

Generator 对象由生成器函数返回并且它符合可迭代协议和迭代器协议

生成器函数在执行时能暂停,后面又能从暂停处继续执行

上面的介绍也就是说,Generator 对象不能使用 new 来生成,而是需要使用生成器函数来返回。

基本思路

  • 定义生成器函数
  • 获取 Generator 对象
  • next 方法启动
  • for of 遍历

在下面的代码中,我们定义了一个 GeneratorFunc 生成器函数,而后通过这个生成器函数定义了 g 对象,最后遍历我们可以通过 for of 来实现,同样的也可以注释掉这几行使用下面的 g.next() 来实现遍历功能。

html 复制代码
    <script>
        // 1. 定义生成器函数
        function* GeneratorFunc(){
            yield 'one'
            yield 'two'
            yield 'three'
        }
        // 2. 获取Generator对象
        const g = GeneratorFunc()
        // 3. next 执行
        // { value:'yield',done:false/true}  done:是否执行完毕,为true表示执行完毕,后面没有值
        for(const iterator of g){
            console.log(iterator);
        }
        // 或者是使用next()
        // g.next()
    </script>

三:Generator管理异步

核心步骤,异步操作前加上 yield

在下方代码中,其实和第二点的代码是很类似的,只是将接口写进了生成器函数中,并且在这部分补全了使用 next() 方法获取全部的接口。

其实从下面的代码中可以看到,其代码是和 Promise 很类似的,并且阅读起来没有那么可观,因此才会延伸出来 async 。

html 复制代码
<body>
    <h2>Generator管理异步</h2>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script>
        // 1. 定义生成器函数
        function* GeneratorFunc(){
            yield axios('http://hmajax.itheima.net/api/city?pname=北京')
            yield axios('http://hmajax.itheima.net/api/city?pname=广东省')
        }
        // 2. 获取Generator对象
        const city = GeneratorFunc()
        // 3. next 执行
        // 或者是使用next()
        city.next().value.then(res => {
            console.log('res:', res);
            return city.next().value
        }).then(res=>{
            console.log('res:', res);
        })
    </script>
</body>

四:总结

Generator 这个知识点是比较琐碎且简单的,因为可以看成 promise 和 async 的过渡,所以其实在实际的项目开发中并没有过多的使用,本来是不打算单独写一篇文章的,不过秉持着努力写好每个知识点的原则,还是将这篇文章写了出来,希望能够对各位小伙伴有所帮助哦。而且掌握这个知识点,能够对你更好的理解 async 有所启发。

相关推荐
初遇你时动了情1 分钟前
JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理,react 实现原理
javascript·vue.js·react.js
我要成为c嘎嘎大王14 分钟前
【C++】类和对象(2)
开发语言·c++
阿华的代码王国17 分钟前
【Android】RecyclerView实现新闻列表布局(1)适配器使用相关问题
android·xml·java·前端·后端
慕y27429 分钟前
Java学习第九十一部分——OkHttp
java·开发语言·学习
汪子熙40 分钟前
Angular 最新的 Signals 特性详解
前端·javascript
Spider_Man40 分钟前
前端路由双雄传:Hash vs. History
前端·javascript·html
南方kenny43 分钟前
CSS Grid 布局:从入门到精通,打造完美二维布局
前端·javascript·css
小泡芙丫44 分钟前
从买房到代码:发布订阅模式的"房产中介"之旅
前端·javascript
海奥华244 分钟前
操作系统到 Go 运行时的内存管理演进与实现
开发语言·后端·golang
企鹅吧1 小时前
前端导出 pdf 与 跑马灯效果 最佳实践
前端·javascript·vue.js