JavaScript读取JSON文件的几种姿势

在JavaScript里读取JSON文件，前端和后端的做法差别很大。浏览器端不能直接读本地磁盘，只能通过网络请求；Node端有fs模块，可以直接操作文件系统。

但不管哪种环境，拿到字符串之后都得走JSON.parse，这点是一样的。

先看浏览器。

现在fetch基本是标配了，简单一个请求就能把json拉回来。

fetch('path/to/your/file.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error fetching the JSON file:', error);
  });

这里有个容易忽略的细节：一定要检查response.ok。如果状态码不是2xx，response.json()还是会被调用，结果解析出来的很可能不是你预期的数据，报错的时候排查起来就麻烦了。另外response.json()本身返回的是Promise，所以后面还需要一个then来接收解析结果。最后的catch会兜住网络错误和前面throw出来的错误，不至于让整个Promise链挂在那悄无声息。

再看Node。

Node下读本地json就简单粗暴很多。一开始大家习惯用fs.readFile的回调写法，指定utf8编码，拿到字符串再手动parse。

const fs = require('fs');

fs.readFile('path/to/your/file.json', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading the file:', err);
    return;
  }
  try {
    const jsonData = JSON.parse(data);
    console.log(jsonData);
  } catch (parseError) {
    console.error('Error parsing JSON:', parseError);
  }
});

这块实际上踩过坑的人不少。文件本身读成功了，但JSON.parse抛异常，如果没包try…catch，进程直接挂掉。

json文件里有时会出现肉眼看不出来的问题，比如文件末尾多了个逗号，或者有人用BOM头，一解析就炸。所以读取错误和解析错误分开处理会更清晰一些，定位问题快。

后来Node 10之后fs.promises就稳定下来了，结合async/await能省不少回调嵌套。

const fs = require('fs').promises;

async function readJsonFile(filePath) {
  try {
    const data = await fs.readFile(filePath, 'utf8');
    const jsonData = JSON.parse(data);
    console.log(jsonData);
  } catch (error) {
    console.error('Error reading the file:', error);
  }
}

readJsonFile('path/to/your/file.json');

这个版本把读文件和解析一起放进try块，一个catch全兜住了。日常用基本够了。

如果想区分是读文件失败还是解析失败，那就在catch里再判断一下错误类型，但大部分场景没这个必要。

两种环境三种写法，基本覆盖了平时需要读json的各种情况。浏览器里用fetch拉数据，Node里用fs读本地文件，加上async/await让异步代码读起来像同步，该怎么选就很清楚了。

你是否还在为域名验证繁琐而头疼？lcjmSSL提供全自动化的域名验证方案，支持HTTP代理、DNS代理（CNAME解析）及主流DNS服务商API接口。一次配置，后续申请无需手动干预，系统自动完成验证，让你的证书获取流程彻底“无人值守”。