如何 0 成本启动全员 AI 技能提升?戳> 了解详情
写点什么

Javascript 之 async 四重奏(一)

  • 2019-12-31
  • 本文字数:1256 字

    阅读完需:约 4 分钟

Javascript之async四重奏(一)

异步操作一直以来都是 JavaScript 开发者十分热衷的话题,从 callback、promise 到 generator 再到 async,其过程就像一首奏鸣曲,在向我们讲述着 JavaScript 异步操作的漫漫进程。


Callback hell 的峥嵘岁月


Callback Hell


在 ES6 之前,我们更多的是采用 callback 的方式处理异步的过程,http://callbackhell.com/(如无法打开请复制链接至浏览器打开)中将类似于以下代码中诸多的’)}’这种形状称为’回调地狱’:


(注:左右/上下滑动屏幕可查看全部代码)


fs.readdir(source, function (err, files) { if (err) {   console.log('Error finding files: ' + err) } else {   files.forEach(function (filename, fileIndex) {     console.log(filename)     gm(source + filename).size(function (err, values) {       if (err) {         console.log('Error identifying file size: ' + err)       } else {         console.log(filename + ' : ' + values)         aspect = (values.width / values.height)         widths.forEach(function (width, widthIndex) {           height = Math.round(width / aspect)           console.log('resizing ' + filename + 'to ' + height + 'x' + height)           this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {             if (err) console.log('Error writing file: ' + err)           })         }.bind(this))       }     })   }) }})
复制代码


显然,没有人会保持足够的耐心去阅读这样的代码-----如果嵌套的层级更深的话.


怎么解决 Callback Hell


我们先看如下的一段 Javascript 代码:


(注:左右/上下滑动屏幕可查看全部代码)


fs.readFile(’./example.txt’, ‘utf-8’, (err, content) => {


let queryWord = content.substring(0, 4);


db.find(select * from example where keyword = ${ queryWord }, (err, res) => {


get(/exampleget?count=${res.length}, data => {


console.log(data);


});


});


});


先读取 example.txt 中的关键字段,查询数据库后根据结果请求数据,其中包含的异步操作有:读取文件、查询数据库、请求数据,这种多层的嵌套显然是不利于阅读与维护的,为了解决这种问题,保持代码的结构整齐、浅显易读不失为一种好的方法:


(注:左右/上下滑动屏幕可查看全部代码)


function getData(count) {   get(`/sampleget?count=${count}`, data => {       console.log(data);   });}
function queryDB(kw) { db.find(`select * from sample where kw = ${kw}`, (err, res) => { getData(res.length); });}
function readFile(filepath) { fs.readFile(filepath, 'utf-8', (err, content) => { let keyword = content.substring(0, 5); queryDB(keyword); });}readFile('./sample.txt');
复制代码


对比之下,通过对函数进行命名或者是将函数封装成独立模块,代码会更具有阅读性。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/QgC2OjVF4pvltte9V_gkIQ


2019-12-31 15:41812

评论

发布
暂无评论
发现更多内容

DrawerLayout(官方侧滑菜单)的简单使用

芯动大师

ViewPager DrawerLayout SlidingMenu

火山引擎边缘渲染,驱动游戏体验升级

火山引擎边缘云

边缘计算 火山引擎 渲染 边缘云

如何针对多租户 SaaS 使用案例扩展机器学习推理

亚马逊云科技 (Amazon Web Services)

Amazon SageMaker

Movist Pro for mac播放流畅、观影愉悦!

Rose

苹果电脑 视频播放器 Movist Pro Mac Movist Pro 中文版

如何将「知识」体系化管理

Java 架构 职场 知识管理

Error:SyntaxError:JSON Parse error:Unexpected EOF 解决办法

Rose

adobe 安装报错

华大北斗上榜“深圳知名品牌”

江湖老铁

中国量子产业集结,用知识产权助力量子应用化

脑极体

尤大:不会说 Rap 的前端不是好前端!写一个 v-rap 指令!

泰罗凹凸曼

JavaScript 有趣的技术知识

2万字60道MySQL经典面试题总结(附答案)

程序员大彬

MySQL 数据库 java面试

Bitmap、RoaringBitmap原理分析

京东科技开发者

数据结构 算法 存储 BitMap 企业号 3 月 PK 榜

Acrobat DC弹窗:“未找到IMSlib,Acrobat服务将无法正常工作”,如何解决?

Rose

Acrobat DC 服务将无法正常工作

深入浅出RPC服务 | 不同层的网络协议

京东科技开发者

网络协议 RPC调用 应用层 jsf 企业号 3 月 PK 榜

窄带高清画质增强之生成式细节修复

阿里云CloudImagine

云计算 窄带高清

内部开发者平台与门户:二者有何关联?

SEAL安全

企业号 3 月 PK 榜 内部开发者平台 内部开发门户

华为全新发布2023春季旗舰新品,智慧生活再进化

最新动态

给程序加个进度条吧!1行Python代码,快速搞定~

程序员晚枫

Python pip 进度条

Nautilus Chain主网上线在即空投规则公布,如何获得更多的空投?

股市老人

Docker 开始清退开源组织,不付费就删除所有私镜像怎么看

HoneyMoose

循序渐进讲解负载均衡vivoGateway(VGW)

vivo互联网技术

负载均衡 网关

Redis链表底层实现以及生产实战

Java redis 缓存 源码 链表

远程桌面连接如何设置?远程桌面连接的设置方法

RayLink远程工具

远程桌面连接

Nautilus Chain主网上线在即空投规则公布,如何获得更多的空投?

鳄鱼视界

数据库+chatGPT3.5 优化、索引、注释、SQL就是一句话的事了

非喵鱼

Java 数据库 openai ChatGPT ChatGPT4

Ableton Live 11 Suite 音乐制作软件v11.2.11中文版安装教程

Rose

音乐制作 Ableton Live 11 Suite Ableton Live

Javascript之async四重奏(一)_语言 & 开发_Think体验设计_InfoQ精选文章