ES6 从入门到精通 # 16:Generator 的应用
2023-03-14 22:58:48 时间
说明
ES6 从入门到精通系列(全23讲)学习笔记。
解决回调地狱
比如有个需求,需要通过接口 https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city= 先获取北京的天气,然后获取上海的,最后获取广州的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <script> $.ajax({ url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=北京", method: "get", success(res) { console.log("res", res); $.ajax({ url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=上海", method: "get", success(res1) { console.log("res1", res1); $.ajax({ url: "https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=广州", method: "get", success(res2) { console.log("res2", res2); // ... } }) } }) } }) </script> </body> </html>
上面就是回调地狱的展示,下面使用 Generator 处理,Generator 能让异步代码同步化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <script> function* main() { let res = yield getData("北京"); console.log("res", res); let res1 = yield getData("上海"); console.log("res1", res1); let res2 = yield getData("广州"); console.log("res2", res2); } const ite = main(); ite.next(); function getData(city) { $.ajax({ url: `https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=${city}`, method: "get", success(res) { ite.next(res); } }) } </script> </body> </html>
其他例子:加载效果的异步
function loadUI() { console.log("加载----loading") } function getData() { setTimeout(() => { console.log("获取数据----data") }, 1000) } function hideUI() { console.log("隐藏----loading") } loadUI(); getData(); hideUI();
下面使用 Generator 处理
function* loadMain() { loadUI(); yield getData(); hideUI(); } function loadUI() { console.log("加载----loading") } function getData() { setTimeout(() => { console.log("获取数据----data") ite.next(); }, 1000) } function hideUI() { console.log("隐藏----loading") } const ite = loadMain(); ite.next();
相关文章
- 如何在 Android 设备上运行 Linux
- 如何在 Ubuntu 桌面中应用强调色
- 如何在 Linux Mint 中创建和切换工作区
- 微软 Windows 11 安卓子系统 WSA 八月更新内容公布:修复 App 重启问题,禁用烦人通知
- 回调函数在命令解析中的应用
- Android内卡挂载之FUSE文件系统
- ObjectMapper,别再像个傻子一样一直New了!
- 微软 Windows 11 Dev 预览版 25182 发布:相机适配 Arm64 支持全新隐私,商店 App 直接安装游戏
- 如何在 Windows 11 上将 Android 手机用作网络摄像头
- 别着急升!劝大家等等iOS 16正式版:原因有四点
- 兼顾敏捷交付和系统稳定运行,大型银行平台化落地实践
- 手把手教你进行JS逆向并去除App开屏广告
- 微前端究竟是什么?微前端核心技术揭秘!
- App与Hap、Entry与Feature,BundleName与Packge,务必弄明白
- 如何在 Ubuntu 中卸载 deb 包
- Windows 11的下一次更新不会删除控制面板 但更多的选项将被转移
- 核心应用覆盖率100%,货拉拉智能监控落地实践
- 十大必备 Ubuntu 应用:必备篇
- 十大必备 Ubuntu 应用:优选篇
- 桌面应用开发技术对比,你明白了吗?