写点什么

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

评论

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

嵌入式系统降低功耗的设计技术

不脱发的程序猿

嵌入式设计 嵌入式系统 低功耗

人人矿场提供真实稳定算力,形成全球分布式算力供给网络

DT极客

520到了,吟湿几首

花花

520 520单身福利 520 单身福利

【建议收藏】B站上有哪些值得反复观看的Java视频教程?

格致君的planB

Matlab制作视频并转换成gif动态图的方法

格致君的planB

一篇文章带你搞懂Python中的类

格致君的planB

程序员兼职网站推荐~

MY

云小课 | 玩转HiLens Studio之手机实时视频流调试代码

华为云开发者联盟

华为 华为HiLens HiLens Studio EI智能体 实时视频

作为骨灰级MEME项目,Grin接下来会走向何方?

猫Buboo

4月热搜:揭秘金融级人脸实名认证解决方案背后的技术硬货

百度大脑

百度

GO语言平均薪资为什么比Java高?

Java架构师迁哥

浅谈虚拟偶像背后的舞蹈生成

行者AI

人工智能

只有程序猿才能看懂的520内涵表白

三掌柜

520 520单身福利 520 单身福利

新垣结衣嫁了个“非典型性”程序员

小智

程序员 软件开发 日本

花重金购买的“Java面试知识点”真香,知彼知己,百战不殆

Java架构师迁哥

细节爆炸!阿里架构师总结出:共计23版块Java架构师“成长笔记”

Java架构追梦

Java 阿里巴巴 架构 面试 成长笔记

程序员应该多久跳一次槽?怎样跳槽才是正确的跳槽?

Java架构师迁哥

浅谈 Serverless 开发和应用

网易云信

Serverless

项目开发中ARM单片机芯片分类及选型

不脱发的程序猿

嵌入式 ARM单片机 ARM芯片分类及选型 单片机选型

张一鸣退隐江湖

池建强

字节跳动 张一鸣

终于有腾讯云大神把困扰我多年的Redis(分布式锁、延时队列、位图、布隆过滤器、漏斗限流)全部讲清楚了

Java 程序员 架构 面试

仅需几行代码轻松实现第一人称行走

ThingJS数字孪生引擎

大前端 3D可视化 数字孪生

阿里架构师自爆“面试指南(泰山版)”所有的成功都不是白给的

Java架构师迁哥

做了一个开源的在线互动教室,想分享给大家

千竹

开源 WebRTC 在线教育 在线课堂 互动白板

浅析决策树的生长和剪枝

华为云开发者联盟

数据 决策树 预测模型 剪枝 过拟合

实现高性能MySQL,深入探索数据库索引

奔着腾讯去

数据库 数据库事务 innodb 索引 MySQL 高可用

大厂面试题之计算机网络重点篇(附答案)

linux大本营

c++ Linux 网络协议 udp TCP/IP

TypeScript 开发环境搭建

Emperor_LawD

typescript ts 520单身福利 520 单身福利

一周信创舆情观察(5.10~5.16)

统小信uos

2021年10年后端开发程序员最新《C/C++Linux 服务器开发》学习路线总结,建议收藏

奔着腾讯去

学习 服务器集群 Linux服务器开发 C++后台开发

马斯克会在熊市周期里瞄准下一个百倍币么?

猫Buboo

区块链 狗狗币

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