飞天发布时刻:2024年 Forrester 公有云平台Wave™评估报告解读 了解详情
写点什么

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

评论

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

Hive学习笔记(二)

五分钟学大数据

hive 7月日更

两者可兼得,在IDEA中使用Git!

Ayue、

git 学习

成功收到美团、字节、蚂蚁Offer后!我把狂刷 5 遍的面试题整理出来了!

Java 程序员 架构 面试

怎么在linux系统下安装Nginx?一分钟学会!

小桃

Linux 网络安全 系统

简单四步学会在数字孪生可视化场景中创建小地图!

ThingJS数字孪生引擎

大前端 地图 物联网 可视化 数字孪生

5W1H聊开源之Why——为什么要参与开源?

禅道项目管理

开源 项目

模块一作业

王小森

公安重点人员研判分析平台解决方案,智慧派出所

虚拟币合约交易平台搭建,永续合约交易系统源码

一个成功的 Git 分支模型如何构建?

白亦杨

[架构实战营]模块一作业

xyu

#架构实战营

架构实战营 -- 模块1作业

发酵的死神

重磅!不容错过的阿里内部微服务速成手册也太赞了(2021版)

Java

接下来的40年,碳中和对我们来说意味着什么?

CECBC

367W字!京东商城Java架构师设计的亿级高并发秒杀手抄笔记

Java架构追梦

Java 架构 秒杀系统 亿级并发 京东商城

模块八作业

c

架构实战营

万字长文,Spark 架构原理和RDD算子详解一网打进!

云祁

大数据 spark 7月日更

CDH的安装(三)

大数据技术指南

CDH 7月日更

模块一作业

燕燕 yen yen

#架构实战营

FIL币价值与未来, FIL币价值预估

架构师实战营模块一命题作业

郑立新

架构实战营

SQL巩固测试题

Flychen

面试扣分点:什么是鸭子类型?

官宣!ElasticJob 3.0.0 版本正式发布

SphereEx

模块一作业

hello

架构实战营

数字货币这波热潮,各国都舍不得错过

CECBC

iOS工程师如何恍然大悟?

程序员 IT 编程之路 iOS 知识体系

视频云峰会|“科技 X 艺术” 的颗粒度体验是什么?

阿里云CloudImagine

阿里云 AR 艺术 摄影 vr

论文解读丨图神经网络应用于半结构化文档的命名实体识别和关系提取

华为云开发者联盟

文档 识别 图神经网络 半结构化文档 关系提取

行业痛点今何在?产业安全专家共话云安全

腾讯安全云鼎实验室

云计算 云安全

存储大师班 | RDMA简介与编程基础

QingStor分布式存储

云原生 对象存储 分布式存储

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