首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在chokidar的watcher.on(‘fs.readfile )之后,Nodejs打印更改数据将返回一个空字符串

在chokidar的watcher.on('fs.readfile')之后,Node.js打印更改数据返回空字符串的原因可能是文件读取操作尚未完成。当使用chokidar库的watcher监听文件变化时,当文件发生变化时,会触发fs.readfile事件。然而,文件读取是一个异步操作,需要一定的时间来完成。

在监听到fs.readfile事件后,Node.js会立即执行后续的代码,而不会等待文件读取操作完成。因此,如果在文件读取操作尚未完成时尝试打印更改的数据,很可能会得到空字符串。

为了解决这个问题,可以在fs.readfile的回调函数中处理更改的数据。回调函数会在文件读取完成后被调用,确保数据已经准备好使用。以下是一个示例代码:

代码语言:txt
复制
const chokidar = require('chokidar');
const fs = require('fs');

const watcher = chokidar.watch('path/to/file');

watcher.on('fs.readfile', (path) => {
  fs.readFile(path, 'utf8', (err, data) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(data); // 打印更改的数据
  });
});

在上述代码中,我们在fs.readfile事件的回调函数中使用fs.readFile来读取文件内容,并在回调函数中打印更改的数据。这样可以确保在文件读取完成后再处理数据,避免返回空字符串的问题。

关于chokidar和fs.readFile的更多信息,可以参考腾讯云对象存储COS(https://cloud.tencent.com/product/cos)和Node.js官方文档(https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

NodeJS监视文件

对于如何监视文件更改这个问题,我第一时间还是想到了Node内置fs库,果然发现了有这样一个操作。...原理 那么通过查源码我发现了,对于第一个我们接到event对象,是这样定义: export type WatchEventType = 'rename' | 'change' 所以说,node眼里他就只有改名和修改两种事件...其次,因为有些编辑器在做修改工作时候是把文件内容都清了之后再写入当前文件,所以它监听到了两个change事件。 那么怎么解决呢? 其实是有方法。...第一步自然是安装: npm install chokidarAPI比较简洁,函数只有一个watch,返回一个FSWatcher对象: export function watch( paths:...那么对于这个watcher对象,我们就可以做一个监视操作了: watcher.on('all', (event, path) => { console.log(`File: ${event},

1.3K10

敲下 vite 命令后,server 做了哪些事?

当我们终端上敲下 vite(vite dev、vite server)到返回下图结果 中间发生了什么事呢?...server return server } createServer 代码精简之后还是比较长,但如果再结合下图去看整个过程就非常清晰了 我们再来详述整个流程: 当我们终端上敲入 vite...创建文件监控器,当前目录下任何文件有风吹草动,都会触发 watcher 上监听函数: // 通过 chokidar 监控文件变化 const watcher = chokidar.watch(path.resolve...,图谱中每一个节点都是 ModuleNode 实例: /** * 每一个模块节点信息 */ export class ModuleNode { // 省略模块节点属性代码......并返回 server,外部通过调用 listen 启动服务器,并打印访问链接和启动时间等信息。

63740
  • 揭开 HMR 面纱,了解它在 node 端实现

    当我们 vscode(或其它代码编辑器)修改一行代码时,会触发文件变化,然后被 Vite server 上文件监听实例获取到文件变化并触发 change 事件: // 文件改变时触发事件 watcher.on...[...mods] : [], // 这是一个异步读函数,它返回文件内容。...之所以这样做,是因为某些系统上,文件更改回调函数可能会在编辑器完成文件更新之前过快地触发 // 并 fs.readFile 直接会返回空内容。...(mod) 返回是 true,取反后就不会执行内部 invalidate。...总结 文章开头那张图再回头看一下: 学习完这一小节,我们知道了步骤1、2、3、4 具体做了什么: 当我们 vscode 上修改一行代码时,会触发文件变化; 文件信息(修改时间、内容)改变之后,会触发

    64010

    三大前端构建工具横评,谁是性能之王!

    重新打包时增加了保存更改和看到更改反映在浏览器之间时间间隔。开发过程中,Snowpack为你应用程序提供unbundled server。每个文件只需要构建一次,就可以永久缓存。...文件更改时,Snowpack会重新构建该单个文件。重新构建每次变更时没有任何时间浪费,只需要在浏览器中进行HMR更新。...在这里我们简单聊一下Skypack初衷,当前许多Web应用都是不同NPM包基础上进行构建,而这些NPM包都被Webpack之类打包工具打成了一个bundle,如果这些NPM包都来源于同一个CDN...已有方案上Vue本可以抛弃Webpack选择Snowpack,但选择开发Vite来造一个轮子也有Vue团队自己考量。...`contains invalid JS syntax. ` + msg, e.idx ) } // 代码字符串取出

    2K41

    前端三大构建工具横评,谁是性能之王!

    重新打包时增加了保存更改和看到更改反映在浏览器之间时间间隔。开发过程中,Snowpack为你应用程序提供unbundled server。每个文件只需要构建一次,就可以永久缓存。...文件更改时,Snowpack会重新构建该单个文件。重新构建每次变更时没有任何时间浪费,只需要在浏览器中进行HMR更新。...在这里我们简单聊一下Skypack初衷,当前许多Web应用都是不同NPM包基础上进行构建,而这些NPM包都被Webpack之类打包工具打成了一个bundle,如果这些NPM包都来源于同一个CDN...已有方案上Vue本可以抛弃Webpack选择Snowpack,但选择开发Vite来造一个轮子也有Vue团队自己考量。...`contains invalid JS syntax. ` + msg, e.idx ) } // 代码字符串取出

    1.2K20

    【NPM库】- 0x04 - Mock Data

    Mock 数据是前端开发过程中必不可少一环,是分离前后端开发关键链路。通过预先跟服务器端约定好接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端开发所阻塞。 1.2....如何利用 Mock.js 生成随机数据。 2.2. 效果预览? ? 2.3. Mock 文件编码方式 Mock 文件编码方式,参考自 Umijs: 支持静态值 支持动态函数 ?...这给了我们拦截、分析请求,并返回自定义 Mock Data 机会。 ? 2.5. body-parser Node.js body parsing middleware....备注:如果在模拟器上以非JSON格式发送,则会获得一个JSON对象 2.6. chokidar A neat wrapper around node.js fs.watch / fs.watchFile...搭建一个 Demo: const path = require("path"); const chokidar = require("chokidar"); chokidar.watch(path.resolve

    84520

    一次弄懂Event Loop(彻底解决此类面试问题)

    栈是一种数据结构,它按照后进先出原则存储数据,先进入数据被压入栈底,最后数据栈顶,需要读数据时候从栈顶开始弹出数据。 栈是只能在某一端插入和删除特殊线性表。 ?...进行插入操作端称为队尾,进行删除操作端称为队头。 队列中没有元素时,称为队列。 队列数据元素又称为队列元素。队列中插入一个队列元素称为入队,从队列中删除一个队列元素称为出队。...详细过程: 73以下版本 首先,打印script start,调用async1()时,返回一个Promise,所以打印出来async2 end。...继续执行同步代码,打印Promise和script end,then函数放入微任务队列中等待执行。 同步执行完成之后,检查微任务队列是否为null,然后按照先入先出规则,依次执行。...然后先执行打印promise1,此时then回调函数返回undefinde,此时又有then链式调用,又放入微任务队列中,再次打印promise2。

    54010

    Nodejs进阶」一文吃透异步IO和事件循环

    理解了 I/O 任务之后,来分析一下 Nodejs 中,I/O 任务两种形态——阻塞和非阻塞。...}) 回调 callback 被异步执行,返回一个参数是错误信息,如果没有错误,那么返回 null ,第二个参数为 fs.readFile 执行得到真正内容。...2 任务队列 整个事件循环过程中,有四个队列(实际数据结构不是队列)是 libuv 事件循环中进行,还有两个队列是 nodejs 中执行分别是 promise 队列 和 nextTick... NodeJS 中不止一个队列,不同类型事件它们自己队列中入队。处理完一个阶段后,移向下一个阶段之前,事件循环将会处理两个中间队列,直到两个中间队列为。...中间队列执行特点: 首先要明白两个中间队列并非在 libuv 中被执行,它们都是 nodejs 层执行 libuv 层处理每一个阶段任务之后,会和 node 层进行通讯,那么会优先处理两个队列中任务

    2.1K20

    深度理解NodeJS事件循环

    导读ALL THE TIME,我们写大部分javascript代码都是浏览器环境下编译运行,因此可能我们对浏览器事件循环机制了解比Node.JS事件循环更深入一些,但是最近写开始深入NodeJS...有给人一种插队感觉.setImmediate 回调处于check阶段, 当poll阶段队列为, 且check阶段事件队列存在时候,切换到check阶段执行,参考nodejs进阶视频讲解:进入学习...除非执行了1000次到了执行上限,所以上面这个案例会不断地打印出nextTick字符串2. setImmediate如果在一个I/O周期内进行调度,setImmediate() 始终在任何定时器(setTimeout...之后在下一个事件循环再执行setTimemout回调函数。...poll阶段执行,当其回调执行完毕之后,poll队列为,而setTimeout入了timers队列,此时有代码 setImmediate(),于是事件循环先进入check阶段执行回调,之后在下一个事件循环再在

    96500

    Node.js 源码解析 util.promisify 如何 Callback 转为 Promise

    Promisify 简单版本实现 介绍 util.promisify 基础使用之后,实现一个自定义 util.promisify 函数简单版本。...Callback 转 Promise 对象测试 }); Promise 写法 这里我们使用 util.promisify fs.readFile 转为 Promise 对象,之后我们可以进行 ....original 是否为 Function,不是则抛错 promisify(fs.readFile) 执行之后返回一个函数 fn,行 {2} 定义待返回 fn 函数,行 {3} 处返回 fn 返回一个.../module/promisify 总结 util.promisify 是 Nodejs 提供一个实用工具函数用于 callback 转为 promise,本节从基本使用 (err, result...转 Promise、自定义 Promise 函数重写 util.promisify 返回值、Promisify 回调函数多参转换三个方面进行了讲解,在理解了其实现之后自己也可以实现一个类似的函数。

    2.4K10

    05_Node js 文件管理模块 fs

    data (String | Buffer) 将要写入内容,可以是字符串或者 buffer 数据。 encoding (String) 可选。...callback { Function } 回调,传递一个异常参数 err。 执行 node fs.js。 会发现目录下多了一个 index.js 文件夹,并且添加了“hello NodeJS!”...内容。 注意,这样写入,是清空原文件中所有数据,然后添加“hello NodeJS!”这句话,即:存在即覆盖,不存在即创建。...打印结果: 1 接收到:18 结束 1 fs 流及其读取 复制代码 2、流写入 fsStream.js const fs = require("fs"); let data = "存入数据......打开 index.js 文件,发现里面内容变成了“存入数据…”。 打印结果: 写入完成! 复制代码 以上我们就通过流形式进行了读取和写入操作。

    98320

    nodejs文件系统

    简介 nodejs使用了异步IO来提升服务端处理效率。而IO中一个非常重要方面就是文件IO。今天我们会详细介绍一下nodejs文件系统和IO操作。...nodejs文件系统模块 nodejs中有一个非常重要模块叫做fs。这个模块提供了许多非常实用函数来访问文件系统并与文件系统进行交互。...fs.watchFile(): 开始监视文件上更改。相关方法:fs.watch()。 fs.writeFile(): 数据写入文件。相关方法:fs.write()。...ctime “更改时间” – 上次更改文件状态(修改索引节点数据时间。 birthtime “创建时间” – 创建文件时间。...我们可以通过一个例子来观察这个差异: windows上: path.basename('C:\\temp\\myfile.html'); // 返回: 'myfile.html' POSIX上:

    1.3K31

    nodejs文件系统

    简介 nodejs使用了异步IO来提升服务端处理效率。而IO中一个非常重要方面就是文件IO。今天我们会详细介绍一下nodejs文件系统和IO操作。...nodejs文件系统模块 nodejs中有一个非常重要模块叫做fs。这个模块提供了许多非常实用函数来访问文件系统并与文件系统进行交互。...fs.watchFile(): 开始监视文件上更改。相关方法:fs.watch()。 fs.writeFile(): 数据写入文件。相关方法:fs.write()。...ctime “更改时间” – 上次更改文件状态(修改索引节点数据时间。 birthtime “创建时间” – 创建文件时间。...我们可以通过一个例子来观察这个差异: windows上: path.basename('C:\\temp\\myfile.html'); // 返回: 'myfile.html' POSIX上: path.basename

    1.5K10

    webp图片实践之路

    最近,我们项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中。传闻IOS10也将要支持webp,那么使用webp带来性能提升更加明显。...二、使用webp常规方法以及它们优劣 首先,我们需要一个工具把图片转成webp格式,这里就使用google官方工具即可,链接。 这个装好之后,你控制台就有了一个cwebp命令。...问题二我们使用nodejs写了一个脚本来监控图片文件夹,当图片增加、修改、删除时,它便会生成或删除对应webp图片。 说了这么多,我们一起来看一看代码实现吧。...并且cookie中记录一个名为webps,值为Acookie,为期一年。...这样,之后就可以css中使用webp类名做兼容处理,img标签引入图片也可以通过cookie得知浏览器是否支持webp,然后做相应处理,后端也可以通过cookie得知设备对webp支持情况来做一些差别渲染

    2.1K100

    前端基础-Node.js核心模块使用

    ,sex:'男',img:''}, {id:2,names:'乌索普',sex:'男',img:''}, {id:3,names:'娜美',sex:'女',img:''} ] 要求1:数据转为字符串存入文件...要求4: hzw.json 文件中id为3数据names改为 ‘女帝’; 2.1.2 http协议理论 参见http部分课件 2.2 HTTP模块 node核心模块之一,用于搭建HTTP服务器...; // 向客户端页面返回字符串 response.write("hello node"); // 结束响应 response.end(); }); ?...因为我们服务器接受请求处理并响应数据时,并没有指定响应数据类型,所以出现了乱码; 而在http中,我们可以通过服务器响应头指定数据类型, http.ServerResponse 类 中为我们提供了...但是,我们不能一直html代码写到服务器方法中,而是需要建一个xx.html文件,html文件中内容返回给客户端; 2.2.2 .html : <!

    95510

    es6 --- Generator 函数

    nodejs 环境执行这段代码,打印出来数据都在代码注释中了,也可以自己去试试。...Iterator对象是一个指针对象,实现类似于单项链表数据结构,通过next()指针指向下一个节点 ———— 这里也就是先简单做一个概念性介绍,后面通过实例为大家演示。...这里slice是一个字符串,但是我们获取Array.prototype[Symbol.iterator]可以得到一个函数,只不过这里[Symbol.iterator]是Symbol数据类型,不是字符串...yield后面的数据返回,存放到返回结果中value属性中。这算是一个方向参数传递。...获取文件内容 }) 其实这个写法就是三个参数都传递给fs.readFile这个方法,其中最后一个参数是一个callback函数。

    64720

    基于nodejs线上代码热部署原理与实现

    背景 大家都知道,nodejs后端服务,如果有代码变动,要重启进程,代码才能生效。...nodejs进程重启时候,用户去访问服务,就会出现短暂 502 bad gateway 如果你服务器加上了watch机制 当服务器上代码频繁发生变动,或者短时间内发生高频变动,那就会一直 502...这就涉及到一个热部署概念,不重启服务情况下,让新部署代码生效。...扫描hots文件夹下所有文件,通过loadHandler方法去加载和运行每一个扫描到文件,结果缓存到handlerMap里 然后用watchHandlers方法开启文件变动监听 watchHandlers...)); // 当你适应require加载一个模块后,模块数据就会缓存到require.cache中,下次再加载相同模块,就会直接走require.cache // 所以我们热加载部署,

    1.2K20

    nodejs基本原理总结

    如果说nodejs是单线程语言,可以想象一下,一个单实例nodejs服务器同时接受100个用户请求时,第100个用户请求要等前面99用户处理完成才能得到处理,如果每个用户请求要0.3秒,第100...while执行4秒期间,计时器已经是过了两秒,而'javascript setTimeout'这一句打印却在'javascript end'之后,即使计时器两秒后回调代码应该被执行时,因为javascript...可以看出100个请求均是在请求返回之前非常短时间都被得到了处理,而返回则均在请求之后,并非请求按接收顺序依次等待各个IO得到处理后依次返回。 四....从上面注册事件后,事件循环得到激活,对于上面代码中fs.readFile这个读文件IO则开始真正执行,而这时候IO执行跟javascript代码执行便没有关系了,由nodejs底层libuv提供线程池接收该文件...可以思考一下,读操作是线程池来控制执行该线程执行前,先在注册事件内存中初始化一个状态是“执行中”,并且事件循环也已经被激活,开始轮询等待执行结果,当执行IO线程执行完之后,再通过底层异步IO

    1.2K50

    nodejs核心api-http模块

    上面的实例代码使用createServer方法返回一个http.Server对象,这其实是一个创建http服务捷径,如果我们用以下代码来实现的话,也一样可行 let http = require...,包含三个事件 data:当请求体数据到来时,该事件被触发,该事件提供一个参数chunk,表示接受数据,如果该事件没有被监听,则请求体会被抛弃,该事件可能会被调用多次(这与nodejs是异步有关系...(data,[encoding]):想请求客户端发送相应内容,data是一个buffer或者字符串,如果data是字符串,则需要制定编码方式,默认为utf-8,res.end调用之前可以多次调用..., 不能写"utf8" 2.如果服务器响应数据时候没有指定响应头, 那么在有的浏览器可能无法响应 * */ // fs.readFile(filePath, " utf8",...url.parse(urlString[, parseQueryString[, slashesDenoteHost]]) 一个URL字符串转换成对象并返回

    2.4K20
    领券