如何用JavaScript获取本地JSON文件？遇fetchData未定义问题求助

嘿，我明白你作为JS新手遇到这个错误有多困惑——我刚学的时候也踩过类似的坑！咱们一步步来解决这个问题，同时帮你成功拿到本地的JSON数据。

为什么会出现fetchData is not defined？ #

当你用<body onload="fetchData()">调用函数时，浏览器会在全局作用域（也就是window对象）里找这个函数。如果函数没被挂载到全局，或者脚本加载的时机不对，就会触发这个错误。常见的两个原因：

• 函数被限制在局部作用域里：比如你把fetchData写在了一个块级代码（{}）或者自执行函数里，它就不会成为全局可访问的函数。
• 脚本加载顺序问题：虽然同步加载的脚本会阻塞页面解析，但有时候浏览器的执行顺序可能让onload触发时，函数还没被注册（不过这种情况比较少见）。

修复方案 + 正确获取JSON的代码 #

方案1：让函数暴露到全局作用域（快速修复） #

修改你的src/scripts.js，明确把fetchData挂载到window对象上，这样全局就能找到它：

window.fetchData = function() {
  // 发起请求获取本地JSON
  fetch('api/data.json')
    .then(response => {
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.json(); // 把响应转为JSON格式
    })
    .then(data => {
      console.log('成功获取到的数据：', data);
      // 这里可以添加渲染数据到页面的逻辑，比如：
      // document.querySelector('h2').textContent = data.title;
    })
    .catch(error => {
      console.error('获取数据出错了：', error);
    });
};

这时候你原来的<body onload="fetchData()">就能正常工作了。

方案2：改用DOMContentLoaded事件（更推荐的现代写法） #

直接用onload属性其实是比较旧的写法，更推荐在脚本里监听DOMContentLoaded事件，这样既避免污染全局作用域，又能确保DOM加载完成后再执行代码：

首先修改index.html，去掉onload属性，并把脚本放在<body>的末尾（确保DOM先加载完成）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>获取本地JSON数据</title>
  <link rel="stylesheet" href="src/styles.css">
</head>
<body>
  <h2>here i am </h2>
  <!-- 把脚本放在body最后，确保DOM已解析完成 -->
  <script src="src/scripts.js"></script>
</body>
</html>

然后修改src/scripts.js：

// 等待整个DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {
  fetchData();
});

function fetchData() {
  fetch('api/data.json')
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP错误！状态码：${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('拿到数据啦：', data);
      // 举个例子：把第一个列表的标题替换页面上的h2
      const pageTitle = document.querySelector('h2');
      pageTitle.textContent = data.lists[0].title;
    })
    .catch(error => {
      console.error('加载数据失败：', error);
    });
}

额外要注意的坑 #

• 文件路径要正确：确保api/data.json的位置是相对于index.html的——比如如果index.html在根目录，api文件夹也在根目录，那这个路径就是对的。
• 本地文件的跨域问题：如果你直接双击打开index.html（URL是file://协议），有些浏览器会阻止fetch请求本地文件。这时候建议用一个简单的本地服务器来测试，比如打开终端，在项目根目录运行npx serve，然后访问它给出的地址（比如http://localhost:3000），这样就不会有跨域问题了。

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