当前位置: 首页 > news >正文

如何优雅的实现回调函数?

本篇文章又是一期优雅的代码编程介绍———回调函数。

传统的nodejs编程都是这样的

const fs = require('fs')
fs.readFile('test.txt','utf8', function(err, dataStr){if(err){}
}) 

嵌套层级如果多了就成回调地狱了。如果我们将这种风格的代码转换成这样呢?

const fs = require('fs');
const {promisfy, waitFor, promisfyNoError} = require('promisfy');
const readFile = promisfy(fs.readFile);
let content = await readFile('myfile.txt', {encoding:'utf8'});
return content;
http.createServer(80, function(req, res) {async function handleRequest(req, res) {if (req.method === 'POST') {req.body = await waitFor(req.sock, 'data');}}
}) 

这种promisfy的风格是不是简洁优雅,一行就搞定了。

安装

npm install --save promisfy 

promisfy包里封装了以下三个函数

  • promisfy: 处理fs这种回调API
  • waitFor: 处理监听事件和流的,对象具有xx.on('event'),xx.on('data'),xx.on('end')这些监听事件。
  • promisfyNoError: 处理回调没有错误抛出的API

源码

  • 参数:传入需要promisfy的函数和上下文
  • 返回值:返回一个新函数
const readFile = promisfy(fs.readFile);
let content = await readFile('myfile.txt', {encoding:'utf8'}); 

解析代码

1.通过agruments内置对象取到函数readFile的参数。
2.调用readFile返回的是一个Promise对象。
3.Promise里声明了一个callback函数。callback传入的参数结构是第一个为err对象,剩余参数为成功的结果。err对象通过reject函数处理,剩余参数用resolve函数处理。
4.处理函数的参数fnArgs,argscallback
5.最后调用这个函数并传入上下文。

  • promisfyNoError:和上述逻辑一样除去了err对象的部分;
  • waitFor:对普通事件监听和流处理做的promisfy封装;

结束语

对于回调这种风格的函数还有事件监听和数据流进行promisfy处理后,就节省了很多很多代码行数,清晰明了。优雅的风格依然还在,还能做一个艺术工程师。

类似的,我们在微信网页开发的时候使用weixin-jssdk,也可以自己封装一个promisfy风格的函数。我们的代码里也不会有看着费劲的屎山了。

wx.request({xxx:'',xxx:'',xxx:'',success(){},fail(){}
}) 

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

http://www.lryc.cn/news/7602.html

相关文章:

  • 3GPP-NR Band20标准定义频点和信道(3GPP V17.7.0 (2022-12))
  • Excel表格的公式不想显示出来,可以这样操作
  • 【零基础入门前端系列】—语义化标签、实体字符、视频、音频(八)
  • 超详细讲解线性表和顺序表!!
  • 大数据之-Nifi-Nifi的安装_启动_认识Nifi的操作台---大数据之Nifi工作笔记0002
  • 【大数据clickhouse】clickhouse 常用查询优化策略详解
  • 【Java项目】基于Java+MySQL+Tomcat+maven+Servlet的个人博客系统的完整分析
  • java 程序员怎么做找工作
  • S7-1200对于不同项目下的PLC之间进行开放式以太网通信的具体方法示例
  • 操作系统(四):磁盘调度算法,先来先服务,最短寻道时间优先,电梯算法
  • maven解决包冲突简单方式(插件maven helper | maven指令)
  • 100行Pytorch代码实现三维重建技术神经辐射场 (NeRF)
  • linux操作系统篇
  • redis+token实现登录校验,前后端分离,及解跨域问题的4种方法
  • 怎么解密MD5,常见的MD5解密方法,一看就会
  • Vue3 目录结构
  • Tsp_nurrec表空间满处理记录20230215
  • 影像测量设备都有什么?有哪些影像仪器?
  • Transformer:开启CV研究新时代
  • Flink X Hologres构建企业级Streaming Warehouse
  • 关于 mysql数据库插入中文变空白 的解决方法
  • 不可错过的SQL优化干货分享-sql优化、索引使用
  • vue3:直接修改reative的值,页面却不响应,这是什么情况?
  • 从Vue2 到 Vue3,这些路由差异你需要掌握!
  • Maxwell简介、部署、原理和使用介绍
  • 20230215_数据库过程_渠道业务清算过程
  • webpack(高级)--性能优化-代码分离
  • 借助docker, 使用verdaccio搭建npm私服
  • c/c++开发,无可避免的模板编程实践(篇二)
  • 【2023】【standard-products项目】中查找的问题与解决方案 (未完待续)