写点什么

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

评论

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

AD域文件权限管理

运维有小邓

IT 运维 AD域管理 文件管理权限

快手前端通用静态托管服务 KFX 演进历程:从崎岖土路到平坦高速

快手技术

用Golang打造高效安全金融科技后端架构

xuyinyin

aiXcoder完成DeepSeek深度融合,支持私有化部署和个性化定制

新消费日报

超过321万个AOI(地理围栏),2025年2月更新,全国范围、全类别、同一来源、属性字段丰富的矢量面数据(AOI数据更新系列)

Geek_f9782a

AOI数据 全国AOI数据 2025年2月最新AOI数据 全国最新地理围栏 超过321万个地理围栏

区块链智能合约的上线

北京木奇移动技术有限公司

智能合约 区块链技术 软件外包公司

AI与低代码平台:简化开发流程,加速数字化转型实施

天津汇柏科技有限公司

人工智能 AI 低代码 数字化转型

软件测试分层测试策略

测试人

40万+小时大数据训练,华为阅读重磅升级精品音色3.0

最新动态

区块链智能合约开发的关键事项

北京木奇移动技术有限公司

区块链技术 智能合约开发 软件外包公司

一个Rust小白发布生产级Rust应用的进阶之路 | 得物技术

得物技术

`后端

中国制造+反向海淘:独立站如何靠“土特产”闷声发家?

代码忍者

Elevenlabs、Hume.ai、B 站多家推出 STT/TTS 新品;Amphion 开源 20 万小时语音数据集丨日报

声网

区块链智能合约的开发

北京木奇移动技术有限公司

智能合约 区块链技术 软件外包公司

25年天津正规等级保护测评机构名单大公开

行云管家

等保 等保测评 等保2.0

F5推出业界首款应用交付与安全一体化平台,全方位赋能 AI 时代的混合多云基础架构

科技热闻

区块链智能合约开发的优化

北京木奇移动技术有限公司

智能合约 区块链技术 软件外包公司

DeepSeek 开源周 “王炸”:DualPipe 与 EPLB,榨干芯片算力的秘密武器

GPU算力

DeepSeek DeepSeek v3 DualPipe 流水线并行 EPLB

vivo打造最具影响力Rust赛事,点亮基础软件事业的“蓝河时代”

脑极体

AI

即时通讯初学者必知必会的20个网络编程和通信安全知识点

JackJiang

网络编程 即时通讯 IM

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