写点什么

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

评论

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

整机生产制造头部厂商雷神科技加入龙蜥社区

OpenAnolis小助手

Linux 开源 整机

天翼云分布式缓存服务(Redis)的几个核心概念

天翼云开发者社区

芝士就是力量!蒙牛2021年报笑出大大的CHEESE

科技新消息

61%!产品+渠道创新 蒙牛冰淇淋业绩收录有史高增长

科技新消息

程序员不好招了吗,web前端培训应该怎么学习

@零度

前端开发

实施知识管理过程中存在的问题(内附解决方案)

小炮

知识管理

爆款国民冰淇淋原来是这样“凝冻”出来的

科技新消息

手绘模型图带你认识Kafka服务端网络模型

华为云开发者联盟

kafka 多线程 网络模型 Reactor多线程 Processor

压测做的不对,等于白做

基调听云

性能测试 压测 全链路压测

领域驱动设计入门与实践[下]

LigaAI

团队管理 DDD 领域驱动设计思想 LigaAI

把一整个生态圈藏进大沙漠 看蒙牛如何在每一滴奶中藏进玄机

科技新消息

设计消息队列存储消息数据的 MySQL 表格

唐尤华

架构实战营

GPU时代来临!

Finovy Cloud

人工智能 gpu GPU服务器

蒙牛2021年报:数智化大脑为乳业插上腾飞翅膀

科技新消息

java培训浅谈程序员怎么避免面试过程中碰壁

@零度

面试 JAVA开发

再论ORACLE上云通用技术方案

天翼云开发者社区

打造中国优质奶源基地 筑牢高质量发展基石

科技新消息

易观分析:海外业务亮眼,研发+IP运营助力中手游持续增长

易观分析

IP 中手游

天翼云新一代V5云主机,Kvm之生,Xen之死!

天翼云开发者社区

专属云资源包计算规格探秘

天翼云开发者社区

教你三步实现CDH到星环TDH的平滑迁移

星环科技

国产数据库

TypeScript 之 any:哪里可以用?哪里不能用?

杨成功

4月月更

国内20家优秀一线低代码平台推荐,经典收藏

J2PaaS低代码平台

低代码 开发工具 低代码平台 J2PaaS低代码

制造业企业数据平台建设最佳实践分享

华为云开发者联盟

数字化转型 数据平台 制造业 华为工业云平台 数据应用

人工智能融合赋能平台,赋能智慧城市智能化升级

脑极体

PolarDB-X 正式发布2.1.0版本,Paxos 重磅开源

阿里云数据库开源

数据库 阿里云 开源 分布式 PolarDB-X

每周更新 | Verilog测试用例及波形展示图功能上线

ShowMeBug

天翼云分布式缓存服务(Redis)的应用场景(干货)

天翼云开发者社区

Linux 管道操作符详解

CRMEB

夯实领军者地位 奶酪业务协同发展领先赛道

科技新消息

墨天轮访谈 | 腾讯张铭:带你揭秘王者荣耀背后的游戏数据库 TcaplusDB

墨天轮

数据库 TcaplusDB 国产数据库

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