写点什么

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

评论

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

比特币跌破 9 万美元,「熊市」已来,8 万美元将成为新的关键「支撑位」?

TechubNews

如何通过Python SDK获取Collection中已存在的Doc

DashVector

人工智能 数据库 AI 大模型 向量

阿里云 Serverless 计算 10 月产品动态

阿里巴巴云原生

阿里云 Serverless 云原生

模型算法建立验证服务系统:用全链路智能保障 AI“建得对、验得严、用得稳”

上海拔俗

技术型外贸企业如何靠“内容”进行外贸推广,吸引海外大客户?

Wolink

跨境贸易 跨境电商 出海 外贸服务 海外营销推广

深陷 Sqoop+Canal 困境?中控技术用 SeaTunnel 打造高效数据采集破局方案

白鲸开源

大数据 sqoop 开源 Apache SeaTunnel 中控技术

SLS 脱敏函数实践:构建 LLM 应用数据输出的安全防线

阿里巴巴云原生

阿里云 云原生 sls

不烧钱的海外营销:5个被低估的推广策略与实战案例

Wolink

跨境电商 出海 海外社媒营销 海外营销推广 海外红人营销

AI 大语言模型及服务平台:用智能基座让千行百业“接得住、用得好、长得快”

上海拔俗

Joycode 无法跨项目读取源码怎么办?MCP Easy Code Reader 帮你解决!

京东科技开发者

AI 行为分析系统:用智能感知让行为“看得清、辨得准、管得住”

上海拔俗

【隐语SecretFlow】从论文到社区贡献,一位算法工程师的开源故事

隐语SecretFlow

ManageEngine卓豪-cmdb智能运维管理平台

ServiceDesk_Plus

CMDB ManageEngine卓豪

PAI Physical AI Notebook详解3:基于仿真的导航模型训练

阿里云大数据AI技术

人工智能 阿里云 模型训练 PAI Physical AI

淘宝拍立淘API助力电商比价与同款搜索

Datafox(数据狐)

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

宝剑锋从磨砺出——零售数据库内核,为大促铸剑!

京东科技开发者

veDB-Search 实战:多路召回,文搜万物

火山引擎开发者社区

大厂严选 | 数据堂2025年度版权数据集热销榜单重磅发布!

数据堂

人工智能 人脸识别 数据集 语音识别 大模型

教学资源库专业知识图谱:用智能关联让知识“连得上、找得准、学得透”

上海拔俗

【效率翻倍】如何设置海外营销自动化工作流?附核心场景SOP

Wolink

跨境贸易 出海 海外社媒营销 海外营销推广 海外红人营销

图解 Apache DolphinScheduler 如何配置飞书告警

白鲸开源

大数据 开源 Apache DolphinScheduler 飞书 任务调度

船舶安全AI管理平台:用智能感知筑牢海上“生命防线”

上海拔俗

2026年海外推广趋势分析,出海企业不迷茫!

Wolink

跨境电商 出海 海外社媒营销 海外营销推广 海外红人营销

闪耀NeurIPS 2025!快手13篇论文入选,Spotlight 成果跻身前三!

快手技术

NeurIPS 顶会论文

一文讲透企业海外营销全景图

Wolink

跨境电商 出海 海外社媒营销 海外营销推广 海外红人营销

多智能体设计模式和智能体框架,你会了么?

京东科技开发者

2025国内主流低代码平台排行,11月最新盘点,头部厂商全解析

优秀

低代码

基于Sermant实现小游戏出海场景的微服务治理

华为云开源

开源 微服务架构 微服务治理 华为云开源

谷歌最强大模型 Gemini 3 炸场

GPU算力

大模型 大语言模型 AI 编程 gpt-5 谷歌Gemini3

Dapp区块链商城开发时间费用以及功能、和传统商城有什么区别

西安链酷科技

AI 模型训练研发:用智能工程化让大模型“训得快、调得准、落得稳”

上海拔俗

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