2天时间,聊今年最热的 Agent、上下文工程、AI 产品创新等话题。2025 年最后一场~ 了解详情
写点什么

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

评论

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

十二张图,一脚踹开消息队列的大门

三分恶

消息队列

就在今天,浪潮云说第二期来啦

云计算

图的应用——关键路径

若尘

数据结构

深入理解搜索引擎——初识query理解

药老算法

搜索引擎 中文分词 query理解 query纠错 query分析

与微软、IBM同台 斯图飞腾Stratifyd入选G2文本分析Grid报告

见康乘拼团软件开发|见康乘拼团系统APP开发

妇与术(三):机器人可以没有性别,但关系技术离不开女性

脑极体

什么是数据集市

奔向架构师

数据仓库 数据架构 7月日更

架构实战营模块8 课后作业

En wei

架构实战营

Python利器!Jupyter最大威胁终于来了

Jackpop

Python Jupyter Notebook

Vue3 + TypeScript 开发实践总结

程序员海军

typescript 大前端 Vue3 框架

Spring到底应该学哪些内容?

冰河

spring aop ioc 注解驱动 依赖反转

Rust从0到1-智能指针-Drop trait

rust smart pointer drop trait

魔方、齿轮、融合剂:当新ICT技术邂逅教育产业

脑极体

为啥Java应用迁移到容器后会出现OOM?

Java架构师迁哥

🏆 【JVM 性能调优】「对象内存分配」输出常用参数

码界西柚

JVM 7月日更

如何看待技术采用生命周期 | 【话题讨论】

耳东@Erdong

云原生 话题讨论 7月日更

【LeetCode】主要元素Java题解

Albert

算法 LeetCode 7月日更

多地“真金白银”力撑区块链,中西部欲弯道超车新赛道

CECBC

IntelliJ IDEA必备7款Python插件

Jackpop

IDEA pycharm

腾讯一面 Java Phaser 并发编程的理解与应用

陈皮的JavaLib

Java 面试 多线程

【Flutter 专题】92 图解 Dart 单线程实现异步处理之 Isolate (一)

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 7月日更

React 18探秘(上)

Teobler

大前端 React

凭借这5步,我30分钟学会了Python爬虫!

Jackpop

爬虫 爬虫教程

公司内部使用的数仓命名规范

白贺BaiHe

大数据 数仓 数仓规范 7月日更

2020年的焦虑与忧伤

Emotion

疫情 考研 研究生

Linux之find exec

入门小站

Linux

在线base64加密解密工具

入门小站

工具

测试开发之网络篇-常用命令

禅道项目管理

Linux 命令行

区块链时代下,企业如何打造数据要素的“新竞争力”?

CECBC

领域驱动设计101 - 聚合

luojiahu

领域驱动设计 DDD

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