首页
学习
活动
专区
工具
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 chokidar 它的API比较简洁,函数只有一个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 启动服务器,并打印访问链接和启动时间等信息。

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

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

    67510

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

    重新打包时增加了在保存更改和看到更改反映在浏览器之间的时间间隔。在开发过程中,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.3K20

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

    重新打包时增加了在保存更改和看到更改反映在浏览器之间的时间间隔。在开发过程中,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 ) } // 将代码字符串取出

    2.1K41

    【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

    86420

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

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

    56310

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

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

    2.1K20

    webp图片实践之路

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

    2.1K100

    深度理解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阶段执行回调,之后在下一个事件循环再在

    97900

    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.5K10

    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 文件,发现里面内容变成了“存入数据…”。 打印结果: 写入完成! 复制代码 以上我们就通过流的形式进行了读取和写入的操作。

    99720

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

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

    1.2K20

    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

    es6 --- Generator 函数

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

    65420

    前端基础-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 : <!

    96110

    Node.js

    Node.js Node.js是一个基于Chrome V8引擎的JavaScript运行环境 官方地址:https://nodejs.org/zh-cn/ 浏览器是JavaScript的前端运行环境 Node.js...它提供了一系列的方法和属性,用来满足用户对路径的处理 需求。 path.join()方法:用来将多个路径拼接成一个完整的路径字符串。...path.basename()方法:用来从路径字符串中,将文件名解析出来。...path:必选参数,表示一个路径的字符串 ext:可选参数,表示文件扩展名 返回:表示路径中的最后一部分 示例: //文件存放的路径 const fpath = 'a/b/c/index.html';...path.extname(path) path:必选参数,路径的字符串 返回:返回得到文件的扩展名字符串 示例: //文件存放的路径 const fpath = 'a/b/c/index.html';

    7.9K20

    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
    领券