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

评论

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

Java基础 - 多态,抽象类,接口,linux源码学习

Java 程序员 后端

Java实现图的存储和创建,linux编程基础课后答案第二章

Java 程序员 后端

自由职业者靠什么赚钱?

石云升

职场经验 10月月更

Java之Spring基础与IOC,java实用教程第五版答案第四章

Java 程序员 后端

Java内存问题 及 LeakCanary 原理分析,mybatis架构设计层次

Java 程序员 后端

Java几种常用JSON库性能比较,java接口开发面试

Java 程序员 后端

Java反射的深入浅出,mongodb优化面试

Java 程序员 后端

Java基础25~XML和JSON解析,springbootoauth2教程

Java 程序员 后端

Java中的泛型,java程序执行过程与编译原理

Java 后端

Java基础 - 单例(饿汉、懒汉),Runtime类,java教程推荐学客巴巴

Java 程序员 后端

Java基础面试题整理,java数组排序sort原理

Java 程序员 后端

JAVA代码审计之Shiro反序列化漏洞分析,浦发银行Java开发笔试题

Java 程序员 后端

Java基础总结三(泛型、异常,阿里java面试题及答案

Java 程序员 后端

架构实战模块二作业

吴霏

「架构实战营」

Java多线程 高频面试题,java架构师工作内容

Java 程序员 后端

Java学习路线和方法推荐,拿下我人生中第7个Offer

Java 程序员 后端

Java如何支持函数式编程?,大专生面试阿里P7居然过了

Java 程序员 后端

Java中高级核心知识全面解析-容器(ArrayList)

Java 程序员 后端

Java初学01:学习路线,java基础入门清华大学出版社

Java 程序员 后端

第二模块作业

River Tree

架构实战营

Java多态大乱炖,mysql基础教程视频

Java 程序员 后端

架构实战营模块二学习总结

吴霏

「架构实战营」

Spring是如何自动注入多类型的?

编号94530

spring bean @Autowired 自动注入

Java之StringUtils的常用方法,java整体项目架构图

Java 程序员 后端

Java基础09 面向对象~类和对象,阿里面试官必问

Java 程序员 后端

Java基础27~使用JDBC+连接池,这篇文章可以满足你80%日常工作

Java 程序员 后端

Java实现RPC(源码),java常见面试题

Java 程序员 后端

Java中高级核心知识全面解析——Dubbo,java语言入门自学书

Java 程序员 后端

Java中高级核心知识全面解析——常用框架(Spring常用注解

Java 程序员 后端

Java基础面试题——IO流,springboot实战项目百度云

Java 程序员 后端

Java学习笔记——正则表达式,平安金服java面试题

Java 程序员 后端

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