写点什么

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

评论

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

万界星空科技WMS仓储管理包含哪些具体内容?

万界星空科技

wms 万界星空科技 仓库管理系统

解析 WebSocket 与 HTTP 协议的关键区别

Apifox

编程 程序员 网络协议 HTTP websocket

使用云压测回放 GoReplay 录制的请求

腾讯云可观测平台

GOREPLAY

实现以图搜货功能,淘宝API开发实战分享

tbapi

图片搜索接口 以图搜货接口 拍立淘接口

新体验、高效能,星河零代码产线加速带动产业新质生产力

飞桨PaddlePaddle

百度 BAIDU 百度飞桨 产品更新 PaddleX

【论文速读】| 通过间接提示注入危害现实世界中的LLM集成应用

云起无垠

探秘Kubernetes:在本地环境中玩转容器技术

SEAL安全

Kubernetes 容器 云原生 本地环境

招聘严峻期我最终拿到5个Offer的一些经验分享(附面试题)

测试人

面试 软件测试

一文读懂MES和ERP的区别

万界星空科技

制造业 ERP mes 万界星空科技 生产管理软件

玩转云端|天翼云边缘安全加速平台AccessOne实用窍门之上传下载极速推进,纵享丝滑体验!

天翼云开发者社区

云计算 边缘计算 云服务 边缘安全

吴晓波频道:基于数据飞轮更懂会员需求 提升业务价值

Geek_2d6073

3D数字绘画和雕刻软件:Mudbox 2025 新功能介绍及安装教程

Rose

Mudbox 2025下载 Mudbox 2025新功能 Mudbox 2025安装教程 3D数字雕刻

Windows自定义后台进程并设置为开机启动

GousterCloud

windows 自定义 后台进程 开机启动

标准库unsafe:带你突破golang中的类型限制

华为云开发者联盟

Go golang 开发 华为云 华为云开发者联盟

cad设计绘图Autodesk AutoCAD 2025完整版中文破解工具

Rose

AutoCAD 2025 CAD2025

殊荣双至,天翼云边缘计算再获两项大奖!

天翼云开发者社区

云计算 边缘计算 云服务 边缘安全

IPQ6018, IPQ6010, IPQ6000-Exploring the high-performance WiFi chip series

wifi6-yiyi

wifi6 IPQ6010

就业寒冬,我是如何拿到5个offer的(附面试题)

霍格沃兹测试开发学社

云服务器几核几G配置应该怎么选择?

Finovy Cloud

服务器 云服务器

人工智能降噪:topaz photo ai 操作系统 topaz photo ai中文破解安装包

Rose

智能降噪 Topaz Photo AI系统要求 Topaz Photo AI破解版

AutoCAD LT 2025介绍(精简版cad2025)及中文版安装教程

Rose

Autodesk AutoCAD LT 2025 cad2025破解版 AutoCAD LT 2025介绍

Maya 2025下载 玛雅maya2025新功能介绍

Rose

Maya 2025中文版 Maya 2025下载 三维动画软件 玛雅2025新功能 玛雅2025破解

【重磅干货】大模型时代,开发者云上成长指南

华为云开发者联盟

华为云 华为云GaussDB 华为云开发者联盟 华为云CodeArts 华为云盘古大模型

京东为openKylin新增SBOM利器,保障软件供应链安全和可追溯性!

京东科技开发者

移动端提高pdf预览清晰度

京东科技开发者

万界星空科技漆包线工厂生产管理软件

万界星空科技

mes 万界星空科技 漆包线mes 漆包线

TiDB 三中心"脑裂"场景探讨

TiDB 社区干货传送门

水杉3D建模工具:Metasequoia破解版 含永久注册码

Rose

水杉3D建模 Metasequoia 4 破解版 Metasequoia 4注册码

topaz gigapixel ai怎么安装?Topaz Gigapixel AI激活安装详细教程

Rose

topaz gigapixel ai破解版 无损放大图像 Topaz Gigapixel AI 安装

2024多云管理平台CMP排名看这里!

行云管家

云计算 云服务 多云管理 云管

从银行资产规模看TiDB上线杭州银行核心到底意味着什么?

TiDB 社区干货传送门

数据库前沿趋势

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