写点什么

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:41769

评论

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

一次旅途

GongTeng95

Java 基础语法

InfoQ_34a83d636158

血的教训!千万别在生产使用这些 redis 指令

redis 学习 编程 程序员

裳雨

GongTeng95

写作 写作平台

数字货币量化交易,量化对冲搬砖系统开发

13530558032

大数据下单集群如何做到2万+规模?

华为云开发者联盟

大数据 集群

2020年8月北京BGP机房网络质量评测报告

博睿数据

测试 机房 评测 排行榜 IDC

如何进步神速

Sean

学习 个人成长

Python基础知识(二)

Python基础

USDT支付系统开发技术方案,数字货币承兑商支付

13530558032

Spring Cloud 微服务实践(2) - Gateway重试机制

xiaoboey

maven Spring Cloud Gateway modules 重试

LeetCode题解:622. 设计循环队列,使用数组,JavaScript,详细注释

Lee Chen

大前端 LeetCode

直播倒计时|30分钟带你解锁“技术写作”新技能

有只小耳朵

技术 写作 直播 技术创作 RTC征文大赛

python——自定义序列类

菜鸟小sailor 🐕

2020年7月云主机性能评测报告

博睿数据

云计算 测试 公有云 评测 排行榜

架构师训练营结业作业

superman

在线游戏,如何把握住1个亿以上的DAU?

博睿数据

运维 监控 AIOPS 系统 用户体验

危与机并存 保险业如何走好线上线下业务并举转型之路?

博睿数据

运维 监控 保险 AIOPS 系统

Spring Cloud 微服务实践(0) - 开篇闲话

xiaoboey

微服务 Spring Cloud Spring Boot Spring Framework

Electronjs

Neil

Java 大前端 Electron 客户端开发

活着

GongTeng95

CentOS 7 安装 Python 3.7

wong

Python

一次压缩引发堆外内存过高的教训

AI乔治

Java kafka JVM

实践案例丨云连接CC实现跨区域多VPC与线下IDC Server互联

华为云开发者联盟

云服务 IDC

不想搞Java了,4年经验去面试10分钟结束,现在Java面试为何这么难

Java架构师迁哥

Spring Cloud 微服务实践(1) - 用Initializr初始化

xiaoboey

Spring Cloud Eureka Gateway Hoxton

架构师训练营大作业

叮叮董董

关于手机里的IP地址,你不得不知道的“秘密”

脑极体

高速路二维码报警定位系统开发,二维码报警定位功能

13530558032

UML练习1-食堂就餐卡系统设计

博古通今小虾米

UML

算法大赛评委亲授通关秘籍,报名倒计时!

易观大数据

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