使用fetch()与fs/promises readFile()读取data.json的区别及最佳实践

核心区别 #

两者虽同为异步Promise-based API，但适用场景与行为逻辑差异显著，核心区别如下：

1. 运行环境与适用范围 #

• fs/promises.readFile() 是Node.js专属的文件系统API，仅能在Node.js环境中使用，专门用于读取本地磁盘文件系统内的文件。
• fetch() 是浏览器原生API，Node.js 18及以上版本也内置支持，核心作用是发起HTTP/HTTPS请求获取网络资源（如服务器托管的JSON文件），无法直接读取本地磁盘文件（浏览器中受同源策略限制，Node.js中虽支持file://协议但不推荐）。

2. 资源读取方式 #

• readFile() 直接操作本地磁盘，接收本地文件路径（绝对或相对路径）作为参数，比如./data.json。
• fetch() 通过URL定位资源，参数可以是远程地址（如https://example.com/data.json）或本地开发服务器地址（如http://localhost:3000/data.json），不能直接传入本地文件路径。

3. 返回结果处理 #

• readFile() 默认返回Buffer对象，需手动转换为字符串后再用JSON.parse()解析；也可通过指定encoding: 'utf8'参数直接获取字符串：

  const content = await readFile('./data.json', 'utf8');
  const data = JSON.parse(content);
  

• fetch() 返回Response对象，需调用.json()方法自动解析为JSON对象；同时要手动处理HTTP状态码（如404、500），因为fetch仅在网络故障时才会reject，HTTP错误状态不会触发reject：

  const res = await fetch('/data.json');
  if (!res.ok) throw new Error(`请求失败：${res.status}`);
  const data = await res.json();
  

4. 权限与限制 #

• readFile() 在Node.js中需要对应文件的读写权限，浏览器环境完全无法使用该API。
• fetch() 在浏览器中受同源策略限制，跨域请求需服务器配置CORS；Node.js中无此限制，但无法直接访问本地文件系统的资源。

最佳实践 #

选择哪种API完全取决于运行环境和资源位置：

• Node.js环境读取本地JSON文件：优先用fs/promises.readFile()，这是专门为本地文件IO设计的API，性能更高，无需经过网络层，行为更符合本地文件操作的预期。
• 浏览器环境读取JSON：只能用fetch()（或更传统的XMLHttpRequest），因为浏览器不允许直接访问本地文件系统，只能通过HTTP请求获取服务器资源。
• Node.js环境读取网络JSON资源：使用fetch()（Node.js 18+内置，低版本可安装node-fetch包），因为fs模块无法处理HTTP请求。

内容的提问来源于stack exchange，提问作者BBruns