写点什么

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

评论

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

Kafka-Broker的基本模块

编程江湖

大数据

VUEX的store用法

CRMEB

飞桨企业版重磅发布智能边缘控制台,5分钟零代码自动化模型部署

百度大脑

人工智能

阿里云李克:边缘云技术发展与实践

阿里云Edge Plus

CDN 边缘计算 CDN加速

12月17日技术大咖云集,云智技术论坛“年度收官”聚焦知识智能化

百度大脑

人工智能

从4K到8K,谁才是开启8K时代的钥匙?

郑州埃文科技

数据库 IP 8k

前端布局中让子元素横向排列并自动换行

Changing Lin

Vue 前端开发 12月日更

从直播硬件出发,浅析直播技术到物联网设备的智能化趋势

阿里云CloudImagine

阿里云 物联网 直播 直播技术 视频云

微服务架构 | 如何优化日志链路追踪输出SQL的执行效率?

李尚智

微服务架构 链路追踪 SpringCloud

压测大师链路监控服务开放免费体验预约

WeTest

Flink Sql Gateway的原理与实践

安第斯智能云

数据库 sql

Linux一学就会之Linux系统启动原理及故障排除

学神来啦

Linux 运维 黑客 linux运维 linux云计算

十一月热点:BML预置模型调参添新利器;EasyDL图像分类上线免训练极速迭代模式

百度大脑

人工智能

CRM报告如何改变您的业务

低代码小观

低代码 企业管理 CRM 企业管理系统 CRM系统

再下一城!两大社区携手打造 API 日志监控新利器

API7.ai 技术团队

云原生 网关 日志管理 Apache APISIX Apache RocketMQ

10个常见的前端手写功能,你全都会吗?

CRMEB

国内首次Feature Store Meetup回顾

第四范式开发者社区

机器学习 第四范式 OpenMLDB 特征平台

网络安全产品之堡垒机应用于教育行业案例讲解

行云管家

网络安全 教育 等保 等级保护

管控一体化 | IM即时通讯构建企业协同生态链

BeeWorks

数百名专家政要出席阿联酋区块链大会“DCS 2021 ” 虎符受邀亮相

区块链前沿News

Hoo 虎符交易所 区块链峰会 DCS 2021 全球分布式云存储峰会

1. 编译原理概览

书旅

Go 后端 编译原理 源码剖析

Java开发之命名规范

@零度

Java 命名规范

为什么我不怎么用调试器

Justin

软件开发 28天写作 调试工具

CurveFS预览版重磅首发,Curve加速迈向云原生软件定义存储

网易数帆

GitHub

3个步骤,4大平台,搞定大规模数据处理

百度开发者中心

大数据

dart系列之:dart优秀的秘诀-隔离机制

程序那些事

flutter dart 程序那些事 12月日更 flutter for web

什么是反序列化?反序列化的过程,原理

网络安全学海

黑客 网络安全 信息安全 渗透测试 反序列化

LevelDB封装和功能拓展

FunTester

数据库 测试框架 测试开发 leveldb FunTester

Hybris commerce产品主数据的搜索API,批量返回若干主数据的值

汪子熙

28天写作 SAP 12月日更

Android C++系列:Linux Socket编程(四)多路IO转接服务器

轻口味

28天写作 12月日更

MySQL从入门到入魔(01)

海拥(haiyong.site)

MySQL 入门 28天写作 12月日更

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