报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

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

评论

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

MyCAT、DRDS、TIDB、TDSQL、TBase 在实现分布式事务时的区别及其各自的优势?

腾讯云数据库

数据库 tdsql

号角声响!联想图像发起“百家百试”项目第二期,诠释“真国货之光”

流计算 Oceanus 限量1元秒杀,立省2000元

腾讯云大数据

数字化加速时刻,天津港解锁了“天工开物”新篇

脑极体

机器人自主学习新进展,百度飞桨发布四足机器人控制强化学习新算法

百度大脑

人工智能 飞桨

必须得会的汽车ECU研发基础--ECU是什么1

SOA开发者

手把手教你使用Studio Lite + Digtal car!助力智能汽车场景、轻应用开发更轻松!

SOA开发者

分享一套golang实现的 IM 系统,一键部署服务端,客户端SDK全平台支持,可以替代IM云服务

OpenIM

华为宣布启动“开源雨林”计划,与社区伙伴共迎开源挑战

解读世界互联网大会新品——智能运维2.0,管运提效再升级

云计算

携程 x StarRocks:高效支持高并发查询,大幅降低人力和硬件成本

StarRocks

大数据 数据分析 高并发 StarRocks

中国移动5G消息开发者社区 | 主题沙龙直播预约:5G消息在文旅场景的应用探讨

5G消息

5G 5G消息 中国移动5G rcs

Redis和tdsql数据异地同步(迁移)案例

腾讯云数据库

数据库 tdsql

运用贝塞尔曲线绘制笔锋效果

ZEGO即构

音视频 笔锋实践 贝塞尔曲线

报名|飞桨中国行- AI赋能软硬件产品创新

百度大脑

人工智能 百度 飞桨

出自阿里P8之手的这份微服务架构实践手册,为何能霸榜GitHub一周

进击的王小二

Java 架构 分布式 微服务

Hold the Door!区块链底层平台流控分析

趣链科技

区块链 流量控制 底层平台

腾讯云原生数据库 TDSQL-C荣获“云原生卓越技术提供商”奖项

腾讯云数据库

数据库 tdsql

云原生数据库TDSQL-C和传统主备方式数据库有什么区别?

腾讯云数据库

数据库 tdsql

使用AI在原神里自动钓鱼,扫描Git仓库泄露的密码 【蛮三刀酱的Github周刊第三期】

Zhendong

GitHub

Python代码阅读(第34篇):列表元素出现频率字典

Felix

Python 编程 Code Programing 阅读代码

记不住源码?掌握这套方法,Alibaba必有你一席之地!

Java 架构 面试 程序人生 编程语言

🚄【Redis基础指南】推荐给大家的「主从模式」+「缓存穿透」的学习小贴士(提炼优化)

码界西柚

redis Redis缓存穿透 10月月更

一文读懂 OceanBase 数据库的SLog日志

OceanBase 数据库

oceanbase OceanBase 开源 OceanBase 社区版 OceanBase 数据库大赛

必须得会的汽车ECU研发基础—底层软件介绍4

SOA开发者

软件架构思考

轻口味

android 架构设计原则 10月月更

自动驾驶混战,剑气二宗谁能笑傲江湖?

脑极体

TDSQL交易型分布式数据库背景分析

腾讯云数据库

数据库 tdsql

盘盘 DevOps“衍生品”: DevSecOps、NoOps、AIOps

飞算JavaAI开发助手

从用户关系看产品发展

石云升

产品经理 产品思维 产品分析 10月月更

这本笔记!仅需16个小时,让你像阿里P7一样掌握Spring源码解析

Java 架构 面试 程序人生 编程语言

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