皮皮网

【c 考勤软件源码】【流量攻击易语言源码】【小程序制作视频源码】node promise 源码

时间:2024-12-26 01:44:08 来源:flink 滚动窗口源码

1.抽丝剥茧:Electron与Node.js的奇葩Bug
2.Axios?get?post请求传递参数的实现代码
3.异步事件管理之Promise详解
4.Vue总结第七天~Promise网络请求和axios 网络模块

node promise 源码

抽丝剥茧:Electron与Node.js的奇葩Bug

       起因是最近在用Electron开发一个桌面端项目,有个需求是需要遍历某个文件夹下的所有JavaScript文件,对它进行AST词法语法分析,解析出元数据并写入到某个文件里。需求整体不复杂,只是c 考勤软件源码细节有些麻烦,当我以为开发的差不多时,注意到一个匪夷所思的问题,查的我快怀疑人生。

       缘起

       什么问题呢?

       原来这个需求一开始仅是遍历当前文件夹下的文件,我的获取所有JS文件的代码是这样的:

       后来需求改为要包含文件夹的子文件夹,那就需要进行递归遍历。按照我以前的做法,当然是手撸一个递归,代码并不复杂,缺点是递归可能会导致堆栈溢出:

       但做为一个紧跟时代浪潮的开发者,我知道Node.js的fs.readdir API中加了一个参数recursive,表示可以进行递归,人家代码的鲁棒性肯定比我的好多了:

       只改了一行代码,美滋滋~

       兼容性怎么样呢?我们到Node.js的API文档里看下:

       是从v..0添加的,而我本地使用的Node.js版本正是这个(好巧),我们Electron中的Node.js版本是多少呢?先看到electron的版本是.0.4:

       在Electron的 发布页上能找到这个版本对应的是..1,比我本地的还要多一个小版本号:

       这里需要说明一下,Electron之所以优于WebView方案,是因为它内置了Chrome浏览器和Node.js,锁定了前端与后端的版本号,这样只要Chrome和Node.js本身的跨平台没有问题,理论上Electron在各个平台上都能获得统一的UI与功能体验。 而以Tauri为代表的WebView方案,则是不内置浏览器,应用程序使用宿主机的浏览器内核,开发包的体积大大减小,比如我做过的同样功能的一个项目,Electron版本有M+,而Tauri的只有4M左右。虽然体积可以这么小,流量攻击易语言源码又有Rust这个性能大杀器,但在实际工作中的技术选型上,想想各种浏览器与不同版本的兼容性,换我也不敢头铁地用啊! 所以,尽管Electron有这样那样的缺点,仍是我们开发客户端的不二之选。 之所以提这个,是因为读者朋友需要明白实际项目运行的是Electron内部的Node.js,而我们本机的Node.js只负责启动Electron这个工程。

       以上只是为了说明,我这里使用fs.readdir这个API新特性是没有问题的。

       排查

       为方便排查,我将代码再度简化,提取一个单独的文件中,被Electron的Node.js端引用:

       能看到控制台打印的 Node.js 版本与我们刚才查到的是一样的,文件数量为2:

       同样的代码使用本机的Node.js执行:

       难道是这个小版本的锅?按理说不应该。但为了排除干扰,我将本机的Node.js也升级为..1:

       这下就有些懵逼了!

       追踪

       目前来看,锅应该是Electron的。那么第一思路是什么?是不是人家已经解决了啊?我要不要先升个级?

       没毛病。

       升级Electron

       将Electron的版本号换成最新版本v.1.0:

       再看效果:

       我去,正常了!

       不过,这个包的升级不能太草率,尤其正值发版前夕,所以还是先改代码吧,除了我上面手撸的代码外,还有个包readdirp也可以做同样的事情:

       这两种方式,在原版本的Electron下都没有问题。

       GitHub上搜索

       下来接着排查。

       Electron是不是有人发现了这个Bug,才进行的修复呢?

       去 GitHub issue里瞅一瞅:

       没有,已经关闭的小程序制作视频源码问题都是年提的问题,而我们使用的Electron的版本是年月日发布的。 那么就去 代码提交记录里查下(GitHub这个功能还是很好用的):

       符合条件的就一条,打开看下:

       修复的这个瞅着跟我们的递归没有什么关系嘛。

       等等,这个文件是什么鬼?

       心血来潮的收获

       我们找到这个文件,目录在lib下:

       从命名上看,这个文件是对Node.js的fs模块的一个包装。如果你对Electron有了解的话,仔细一思索,就能理解为什么会有这么个文件了。我们开发时,项目里会有许多的资源,Electron的Node.js端读取内置的文件,与正常Node.js无异,但事实上,当我们的项目打包为APP后,文件的路径与开发状态下完全不一样了。所以Electron针对打包后的文件处理,重写了fs的各个方法。

       这段代码中重写readdir的部分如下:

       上面的判断isAsar就是判断是否打包后的归档文件,来判断是否要经Electron特殊处理。如果要处理的话,会调用Electron内部的C++代码方法进行处理。

       我发现,这里Electron并没有对打包后的归档文件处理递归参数recursive,岂不是又一个Bug?应该提个issue提醒下。

       不过,我们目前的问题,并不是它造成的,因为现在是开发状态下,上面代码可以简化为:

       对Promise了如指掌的我怎么看这代码也不会有问题,只是心血来潮执行了一下:

       我去,差点儿脑溢血!

       好的一点是,曙光似乎就在眼前了!PHP mysql文字网游源码事实证明,心血来潮是有用的!

       Node.js的源码

       这时不能慌,本地切换Node.js版本为v,同样的代码再执行下:

       这说明Electron是被冤枉的,锅还是Node.js的!

       Node.js你这个浓眉大眼的,居然也有Bug!呃,还偷偷修复了!

       上面的情况,其实是说原生的fs.readdir有问题:

       也就是说,fs.promises.readdir并不是用util.promisify(fs.readdir)实现的!

       换成同步的代码readdirSync,效果也是一样:

       我们来到Node.js的GitHub地址,进行 搜索:

       打开这两个文件,能发现,二者确实是不同的实现,不是简单地使用util.promisify进行转换。

       fs.js

       我们先看 lib/fs.js。

       当recursive为true时,调用了一个readdirSyncRecursive函数,从这个命名上似乎可以看出有性能上的隐患。正常来说,这个函数是异步的,不应该调用同步的方法,如果文件数量过多,会把主进程占用,影响性能。

       如果没有recursive,则是原来的代码,我们看到binding readdir这个函数,凡是binding的代码,应该就是调用了C++的底层库,进行了一次『过桥』交互。淘客app源码出售

       我们接着看readdirSyncRecursive,它的命名果然没有毛病,binding readdir没有第4个参数,是完全同步的,这个风险是显而易见的:

       fs/promises.js

       在lib/internal/fs/promises.js中,我们看到binding readdir的第4个参数是kUsePromises,表明是个异步的处理。

       当传递了recursive参数时,将调用readdirRecursive,而readdirRecursive的代码与readdirSyncRecursive的大同小异,有兴趣的可以读一读:

       fs.js的提交记录

       我们搜索readdir的提交记录,能发现这两篇都与深度遍历有关:

       其中 下面的这个,正是我们这次问题的罪魁祸首。

       刚才看到的fs.js中的readdirSyncRecursive里这段长长的注释,正是这次提交里添加的:

       从代码对比上,我们就能看出为什么我们的代码遍历的程序为2了,因为readdirResult是个二维数组,它的长度就是2啊。取它的第一个元素的长度才是正解。坑爹!

       也就是说,如果不使用withFileTypes这个参数,得到的结果是没有问题的:

       发版记录

       我们在Node.js的发版记录中,找到这条提交记录,也就是说,v..0才修复这个问题。

       而Electron只有Node.js更新到v后,这个功能才修复。

       而从Electron与Node.js的版本对应上来看,得更新到v了。

       只是需要注意的是,像前文提过的,如果是遍历的是当前项目的内置文件,Electron并没有支持这个新的参数,在打包后会出现Bug。

       fs的同步阻塞

       其实有人提过一个 issue:

       确实是个风险点。所以,建议Node.js开发者老老实实使用fs/promises代替fs,而Electron用户由于坑爹的fs包裹,还是不要用这个特性了。

       总结

       本次问题的起因是我的一个Electron项目,使用了一个Node.js fs API的一个新参数recursive递归遍历文件夹,偶然间发现返回的文件数量不对,就开始排查问题。

       首先,我选择了升级Electron的包版本,发现从v.0.4升级到最新版本v.1.0后,问题解决了。但由于发版在即,不能冒然升级这么大件的东西,所以先使用readdirp这个第三方包处理。

       接着排查问题出现的原因。我到Electron的GitHub上搜索issue,只找到一条近期的提交,但看提交信息,不像是我们的目标。我注意到这条提交的修改文件(asar-fs-wrapper.ts),是Electron针对Node.js的fs API的包装,意识到这是Electron为了解决打包前后内置文件路径的问题,心血来潮之下,将其中核心代码简化后,测试发现问题出在fs.promises readdir的重写上,继而锁定了Node.js版本v..1的fs.readdir有Bug。

       下一步,继续看Node.js的源码,确定了fs.promises与fs是两套不同的实现,不是简单地使用util.promisify进行转换。并在fs的代码找到关于recursive递归的核心代码readdirSyncRecursive。又在提交记录里,找到这段代码的修复记录。仔细阅读代码对比后,找到了返回数量为2的真正原因。

       我们在Node.js的发版记录中,找到了这条记录的信息,确定了v..0才修复这个问题。而内嵌Node.js的Electron,只有v版本起才修复。

       不过需要注意的是,如果是遍历的是当前项目的内置文件,由于Electron并没有支持这个新的参数,在打包后会出现Bug。而且由于fs.readdir使用recursive时是同步的,Electron重写的fs.promises readdir最终调用的是它,可能会有隐性的性能风险。

       本次定位问题走了些弯路,一开始将目标锁定到Electron上,主要是它重写fs的锅,如果我在代码中用的fs.readdirSync,那么可能会更早在Node.js上查起。谁能想到我调用的fs.promises readdir不是真正的fs.promises readdir呢?

       最后,针对此次问题,我们有以下启示:

       PS:我给Electron提了个 issue,一是让他们给fs.readdir添加recursive参数的实现,二是让他们注意下重写时fs.promises readdir的性能风险。

Axios?get?post请求传递参数的实现代码

       Axios是一个基于Promise的HTTP客户端,可用于浏览器和Node.js。它支持浏览器和Node.js环境,通过使用Promise可以拦截请求和响应,同时也能转换请求和响应数据。此外,它还能自动将响应数据转换为JSON格式,并且在浏览器端提供防止CSRF(跨站请求伪造)的功能。

       安装axios可以通过npm、Bower或通过CDN引入。使用npm安装时,命令如下:

       npm install axios

       安装完成后,在main.js文件中引入axios:

       import axios from "axios";

       接下来,可以在App.vue文件中使用axios。例如,发起一个GET请求:

       created:function(){ this.$axios.get("/seller",{ "id":}).then(res={ console.log(res.data); });}

       发起一个POST请求时,需要将参数封装为URLSearchParams对象:

       $("#postId").click(function () { var params = new URLSearchParams(); params.append('username', 'sertyu'); params.append('password', 'dfghjd'); axios.post('http://localhost:/user/addUser1', params).then(function (value) { console.log(value);}).catch(function (reason) { console.log(reason);}); }

       进行并发请求时,可以使用axios.all和axios.spread:

       $("#buttonId").click(function () { axios.all([getUser1(), getUser2()]).then(axios.spread(function (user1, user2) { alert(user1.data.username); alert(user2.data.username);}))}

       Axios还提供了多种请求方法别名,如:

       axios.request(config)axios.get(url[, config])axios.delete(url[,config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])

       这些别名方法简化了请求过程,避免了重复配置。

       请求配置选项包括URL、方法、基础路径、数据转换、请求头、参数、响应类型等。响应内容包括数据、状态码、状态文本、响应头、配置等。

       默认配置可以全局设置,也可以在实例化时自定义。拦截器可以在请求和响应到达then/catch之前拦截处理。错误处理通过catch方法捕获异常,可以获取详细的错误信息。

       取消请求可以通过CancelToken实现。创建一个CancelToken实例后,可以通过cancel方法取消请求。

异步事件管理之Promise详解

       ES6 Promises是浏览器JavaScript和NodeJS中较早的异步事件处理方案,广泛使用于现代异步编程。

       ES6 Promises具有三种状态:pending、fulfilled和rejected。当状态改变时,会触发then方法绑定的处理函数。

       通过调用Promise构造函数,可以实例化一个Promise异步对象。然后可以使用then、catch和finally方法进行异步处理。

       Promise.prototype.then()方法可以返回一个全新的Promise对象,允许链式调用。在回调函数中处理数据或触发后续的Promise。

       Promise.resolve()方法用于创建一个已经解决的Promise对象,而Promise.reject()用于创建一个已经被拒绝的Promise对象。

       Promise.all()和Promise.race()方法分别用于处理数组中的所有或任意一个Promise。

       每次调用then()都会返回一个新的Promise对象,这使得Promise可以进行链式方法调用。

       Promise使用reject而不是throw,因为这样更安全,同时可以更好地处理错误。在then()中执行reject操作时,可以通过返回自定义的Promise对象来实现。

       Promise的缺点包括一旦创建即执行、无法取消、处于pending状态时无法获知进展阶段等。为了克服这些问题,后续出现了async/await和RxJS等更高级的异步处理技术。

       随着技术的发展,Promise为JavaScript前端异步编程提供了强大支持。后续将有更深入的讨论,分享async/await和RxJS的使用方法及其比较。

Vue总结第七天~Promise网络请求和axios 网络模块

       Vue总结之网络请求:Promise与axios模块详解

       在Vue开发中,异步处理是必不可少的一部分,本文将介绍ES6中Promise的网络请求和axios这个常用的网络模块。首先,让我们看看Promise如何简化异步编程。

       1. Promise基础

       Promise是ES6提供的处理异步操作的解决方案,它通过链式调用实现,通过封装Promise类实现网络请求。例如,我们可以创建一个封装了异步请求的Promise对象。

       2. axios网络模块

       Axios是一个强大的基于Promise的HTTP库,适用于浏览器和Node.js环境。其官网详细文档提供了丰富的资源。安装方法如下:

       npm install axios

       Axios的特点包括发送请求、全局配置、拦截器的使用以及封装功能。以下是axios的关键配置:

       全局配置:如设置baseURL、headers,用于基础请求设置。

       参数配置:如params、headers、data等,用于指定请求体和请求头信息。

       响应处理:如responseType和withCredentials,处理响应数据格式和跨域携带cookies。

       代理和取消请求功能:为爬虫抓取数据或处理需要取消的请求。

       拦截器:用于请求和响应的预处理,例如登录验证和数据格式转换。

       封装:将axios封装到一个文件中,便于管理和维护。

       功能特点:支持浏览器和Node.js环境,提供Promise API,拦截器和数据转换等。

       以上是Vue开发中Promise网络请求和axios模块的简要概述,对于更深入的使用,推荐参考Axios官方文档进行学习。如果你在实际项目中遇到网络请求问题,axios是一个值得信赖的工具。

       来源:一乐乐的博客园| 转载请注明出处

推荐资讯
能跨区上班吗?能出小区吗?能快递外卖吗?天河最新疫情防控措施权威问答来了

能跨区上班吗?能出小区吗?能快递外卖吗?天河最新疫情防控措施权威问答来了

rxjs observable源码

rxjs observable源码

源码不会安装

源码不会安装

商品列表源码_商品列表ui

商品列表源码_商品列表ui

北京通州:“快”“细”结合护航节日食品安全

北京通州:“快”“细”结合护航节日食品安全

cye指标 源码_cye指标源码

cye指标 源码_cye指标源码

copyright © 2016 powered by 皮皮网   sitemap