写点什么

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

评论

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

阿里大牛原创技术好文精选整理:Redis+Nginx+设计模式+Spring全家桶+SQL+Dubbo

Java架构之路

Java 程序员 面试 编程语言

甲方日常 32

句子

随笔杂谈

第四课系统架构课后作业

Geek_michael

极客大学架构师训练营

大区块链的必然性

CECBC

区块链技术

大型互联网系统常用的技术方案

天天向上

极客大学架构师训练营

第四周总结

Geek_ac4080

Linux的信号

菜鸟小sailor 🐕

c++

十五、深入Python输入和输出

刘润森

Python

典型的大型互联网应用方案

garlic

极客大学架构师训练营

自学编程,看书还是视频?

沉默王二

程序员 读书 自学编程 视频

手把手教你分析Mysql死锁问题

捡田螺的小男孩

MySQL 死锁

一次用户故事地图之旅

Bruce Talk

敏捷开发 用户故事 Product Owner 用户故事地图

第11周总结

Vincent

极客时间 极客大学

三步法解析Express源码

执鸢者

面试 大前端 Node Express

每天都要写吗?

Nydia

区块链要如何解决供应链金融痛点?

CECBC

区块链 金融

Flink时间服务和计时器-6-5

小知识点

scala 大数据 flink

第11周作业

Vincent

极客时间 极客大学

迭代开发中的微服务拆分

码猿外

架构 微服务 架构演进

职场求生攻略答疑篇之 4 —— 社会有多真实,人心就有多虚伪

臧萌

职场 职场成长

马化腾的区块链理想

CECBC

区块链 马化腾

Week 3学习总结

balsamspear

极客大学架构师训练营

给新入职工程师的10条建议

supernova

管理 职场 工作方式

架构师训练营第四周学习总结

吴传禹

极客大学架构师训练营

一文带你轻松了解Python导入模块的各种命令

计算机与AI

Python

如何设计大型互联网系统架构

天天向上

极客大学架构师训练营

Week 3命题作业

balsamspear

极客大学架构师训练营

十六、深入Python字符串

刘润森

Python

架构师训练营第四周课后作业

Gosling

极客大学架构师训练营

架构师训练营第四周学习总结

Gosling

极客大学架构师训练营

架构师训练营第四周作业

我是谁

极客大学架构师训练营

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