写点什么

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

评论

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

零代码!快速搭建你的专属论文阅读助手|火山方舟零代码智能体教程

火山引擎开发者社区

广大中小企业的共同选择!华为云Flexus云会议引领云上协作新潮流

轶天下事

从人工到智能:DeepSeek重新定义告警管理效能标准

嘉为蓝鲸

运维 AIOPS 告警管理 DeepSeek

鸿蒙APP性能优化

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

APP开发 软件外包公司 APP外包公司

MAC与HMAC技术辨析

石君

hash HMAC-SHA

《Operating System Concepts》阅读笔记:p258-p271

codists

操作系统

多种设备皆可联接!华为云Flexus云会议开箱即用、轻松上手

轶天下事

为什么说JSON不一定是LLM结构化输出的最佳选择?

Baihai IDP

程序员 AI LLMs 格式化数据

Sandisk闪迪携UFS 4.1存储解决方案亮相CFMS | MemoryS 2025

极客天地

官网购买、注册即用!华为云Flexus云会议让云上沟通更高效

轶天下事

DeepSeek大模型6大部署模式解析与探索测试开发技术赋能点

测试人

人工智能 软件测试

DistilQwen2.5蒸馏小模型在PAI-ModelGallery的训练、评测、压缩及部署实践

阿里云大数据AI技术

人工智能 阿里云 LLM Qwen DistilQwen2.5

从古籍到算法,数智本草大模型背后的研发之路

华为云开发者联盟

人工智能 盘古大模型 大模型

OCAI + DeepSeek满血版双buff加成,OS运维从此告别焦虑

OpenCloudOS

AI OpenCloudOS 社区 DeepSeek

字节跳动冯佳时:大语言模型在计算机视觉领域的应用、问题和我们的解法

极客天地

19.5stars!未来十年一定要学的免费、开源的OLAP数据库——DuckDB

遇码

大数据 开源 数据分析 OLAP duckdb

智能制造架构设计方案

金陵老街

智慧工厂 智能制造

当达索仿真遇上DeepSeek:AI给工程研发装上了"智慧大脑"

思茂信息

abaqus DeepSeek SIMULIA CST Studio Suite 达索

邀请函|相约新乡——“AI 赋能,智造跃迁” AI 驱动数字化创新设计促进新质生产力发展交流会

Altair RapidMiner

AI 数字化转型 仿真 智能制造 CAE

推理大模型时代,TextIn ParseX助力出版业知识资产重构

合合技术团队

人工智能 算法 图表 图像处理 大模型

【GreatSQL优化器-16】INDEX_SKIP_SCAN

GreatSQL

打破云会议技术壁垒!华为云Flexus云会议轻松解决中小企业协作难题

轶天下事

如何组织一场成功的云会议?华为云Flexus云会议让会议更加轻松高效

轶天下事

从ChatGPT到DeepSeek,现象级爆火背后的数学逻辑!

小鲸数据

RocketMQ:消息发送机制

葛飞

黑龙江等级保护测评到底该不该每年都做?

黑龙江陆陆信息测评部

字节跳动 EB 级日志系统设计与优化实践

火山引擎开发者社区

高清、高效、高性价比,华为云Flexus云会议专为中小企业而生!

轶天下事

认知、实践、驾驭:AI 时代普通人的务实生存法则

小鲸数据

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