定时更新JSON为空时，如何控制JavaScript解析错误？

我之前也碰到过一模一样的场景——后台更新JSON文件的那2秒里文件内容为空，直接导致前端解析炸锅。你可以通过捕获Promise链中的所有错误来解决这个问题：既不会让浏览器抛出烦人的"Uncaught (in promise)"错误，又能按照需求输出自定义错误信息。

下面是两种可行的解决方案，我会分别说明适用场景：

方案一：精准控制解析流程（推荐） #

先读取响应文本，手动判断内容是否为空后再解析JSON，能更精准地定位错误原因：

fetch("http://location/file/data.json")
  .then(res => {
    // 先过滤HTTP请求层面的错误（比如404、500）
    if (!res.ok) {
      throw new Error(`请求失败！状态码：${res.status}`);
    }
    // 先读取文本，而不是直接用res.json()
    return res.text();
  })
  .then(text => {
    // 判断文本是否为空（去除首尾空格后检查）
    if (!text.trim()) {
      throw new Error("JSON文件正在更新，内容暂时为空");
    }
    // 手动解析JSON
    return JSON.parse(text);
  })
  .then(data => {
    // 正常处理数据的逻辑
    // do something
    console.log("数据解析成功", data);
  })
  .catch(error => {
    // 捕获所有环节的错误，统一处理
    console.error("自定义错误提示:", error.message);
    // 如果需要查看完整错误栈，也可以直接输出error对象
    // console.error("错误详情:", error);
  });

方案二：简化写法（快速解决） #

如果不需要精准区分错误类型，直接捕获res.json()抛出的解析错误即可：

fetch("http://location/file/data.json")
  .then(res => res.json())
  .then(data => {
    // do something
  })
  .catch(error => {
    // 针对性处理JSON解析为空的错误
    if (error instanceof SyntaxError && error.message.includes("Unexpected end of JSON input")) {
      console.error("自定义错误：JSON文件正在更新，请稍后重试");
    } else {
      // 处理其他类型的错误（比如请求失败）
      console.error("其他错误:", error);
    }
  });

核心原理 #

不管用哪种方案，关键都是在Promise链的末尾加上catch块——它会捕获链中所有未处理的错误，阻止浏览器抛出"Uncaught (in promise)"的全局错误，同时让你可以自定义错误输出的内容和格式。

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