写点什么

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

评论

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

合合信息:视觉内容安全技术的前沿进展与应用

阿Q说代码

基于HarmonyOS 5.0的元服务:技术架构、应用场景与未来发展【探讨】

申公豹

HarmonyOS

HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

HarmonyOS应用开发实战-开箱即用的首页页面构建与ArkTS解析【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

《计算机组成及汇编语言原理》阅读笔记:p28-p47

codists

计算机组成及汇编语言原理

从GPT到o3:Next-token Prediction 的核心奥秘(上)

JustYan

人工智能 大模型 openai GPT 生成式AI

引领密码技术革新,牢筑数字安全基石------openHiTLS密码套件开源发布

极客天地

阿里大佬翻遍全网Java面试文章,总结出这份1658页文档,GitHub收获25K+点赞

Summer

Java 程序员 面试 架构师 大厂

探索HarmonyOS开发:用ArkTS构建个人主页和活动管理系统【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

从GPT到o3:Next-token Prediction 的核心奥秘(下)

JustYan

人工智能 大模型 openai GPT 生成式AI

鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

mac三维建模软件:Rhino 8 for mac中文破解版

小玖_苹果Mac软件

Python 变量与运算:基础教程

敲代码不忘补水

Python 编程语言 计算机科学与技术 #科技

INFINI Labs 产品更新 | Console/Gateway/Agent 等产品开源发布首个版本

极限实验室

console Gateway agent loadgen easysearch

外媒编辑评选今年最佳游戏TOP10 《黑神话:悟空》第二

阿拉灯神丁

游戏

HoudahSpot for Mac中文版 多功能文件搜索软件

小玖_苹果Mac软件

三面滴滴失败,总结了Java面试题,有几个题还是一直搞不懂

Summer

Java 程序员 面试 架构师 大厂

Python 条件判断:全面掌握 if、else、elif 语句的用法

敲代码不忘补水

Python 编程语言 科技 if 计算机科学与技术

全网最全JAVA面试八股文,终于整理完了

Geek_Yin

Java 程序员 java面试 Java面试题 Java面试八股文

开箱即用的个人主页页面开发实战—基于HarmonyOS 5.0 (Next)和ArkTS的实现【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】

申公豹

HarmonyOS

阿里P7架构师,耗时十年整理的Java面试飞升笔记,差距不是一点点

程序员高级码农

Java 程序员 java面试 Java后端 Java面试题

不会还有程序员不知道跳槽季靠这1700道java面试题就能平淌大厂吧

程序员高级码农

Java java程序员 java面试 Java后端 Java面试题

Java高频面试题(2025最新含答案)

Geek_Yin

程序员 Java 面试 #java Java 面试题

某世界知名航司携手雅菲奥朗开启SRE和可观测性培训,加速企业数字化转型

雅菲奥朗

Observability SRE培训 SRE认证 可观测性认证 可观测性培训

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