写点什么

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

评论

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

Typescript AI 通义灵码 VSCode插件安装与功能详解

阿里云云效

typescript

【重磅】敲敲云零代码 "AIGC应用大模型" 上线了~

JEECG低代码

零代码 AIGC 流程编排 敲敲云 AI 大模型

天润融通AI Agent,干洗行业客服成本直降90%的秘诀

天润融通

域名转移会影响域名解析吗?

防火墙后吃泡面

优化 Apache 日志记录的 5 个最佳实践

运维有小邓

日志管理系统 Apache 日志

「高盛」最新人形机器人研报:主流人形机器人公司梳理和商业化瓶颈(附报告)

机器人头条

科技 大模型 人形机器人 具身智能

深入研究:1688拍立淘图片搜索API详解

tbapi

1688API 1688拍立淘接口 1688图片识别接口 1688图片搜索API

API 接口开发与合理利用:构建高效、安全、可维护的数字桥梁

Noah

ERP系统生产模式(ATO、MTS、MTO、ETO、CTO)你了解多少?!

积木链小链

数字化 ERP 智能制造 生产模式

天润融通AI Agent重塑零售连锁行业客户服务竞争力

天润融通

如何使用 Databend Cloud 化简大数据架构?| Data Infra NO.24 回顾

Databend

程序员业务能力进阶:技术与业务的深度融合

代码制造者

低代码 #程序员

【FAQ】HarmonyOS SDK 闭源开放能力 — IAP Kit(6)

HarmonyOS SDK

harmoyos

ONES 携手华为云,发布 ONES IPD Essence 集成产品研发精要解决方案

万事ONES

华为云 IPD项目管理 ONES研发管理

Typescript AI 通义灵码 VSCode插件安装与功能详解

阿里巴巴云原生

从训练到推理丨焱融存储蝉联 IDC SDS 文件市场增速第一

焱融科技

文件存储 软件定义存储 AI存储 全闪存 IDC报告

Easysearch 自动备份:快照生命周期管理

极限实验室

Snapshot easysearch

阿里云 Elasticsearch Serverless 检索增强型8.17版免费邀测!

阿里云大数据AI技术

大数据 elasticsearch 阿里云 检索 serveless

北京七猫,薪资25~35K,瞧瞧面试强度

王中阳Go

Go 面试

【HarmonyOS 5】如何开启DevEco Studio热更新调试应用模式

GeorgeGcs

调试 热更新

凌晨 GPT - 4.1霸气登场,性能狂飙还降价

GPU算力

openai ChatGPT ChatGPT4 LLM模型 #大语言模型

通义灵码助力Redis开发:智能问答与代码生成技巧

阿里云云效

AI 技术在英语学习中的应用

北京木奇移动技术有限公司

软件外包公司 AI口语练习 AI英语学习

通义灵码助力Redis开发:智能问答与代码生成技巧

阿里巴巴云原生

用 SQL 还是 NoSQL?Apipost 的回答是:两个都要!

数据追梦人

人工智能与智能制造:如何利用AI推动工业自动化与生产优化?

天津汇柏科技有限公司

人工智能 智能制造 AI人工智能

【HarmonyOS 5】AttributeModifier和AttributeUpdater详解

GeorgeGcs

update Attribute Modifier

使用 Node.js、Express 和 React 构建强大的 API

数据追梦人

LLM实现text2SQL实战总结

数由科技

人工智能 设计原则 LLM text2sql

区块链RWA系统的技术难点

北京木奇移动技术有限公司

区块链技术 软件外包公司 RWA开发

区块链RWA软件系统的安全性

北京木奇移动技术有限公司

区块链技术 软件外包公司 RWA开发

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