添加Fetch获取本地JSON文件后函数停止运行且无数据返回

嗨，我来帮你排查下这个问题，从你的代码和描述来看，主要有几个可能的原因，咱们一个个拆解解决：

1. 本地文件协议的安全限制（最常见的坑） #

如果你是直接双击打开HTML文件（此时浏览器用的是file://协议），浏览器的同源策略会阻止你通过fetch请求本地JSON文件——这是浏览器的安全限制，不允许本地文件之间发起跨源请求（哪怕它们在同一个文件夹里）。

解决办法：
用本地HTTP服务器来运行你的项目，比如：

• 用VSCode的「Live Server」插件，右键HTML文件选择「Open with Live Server」；
• 用Python：在项目目录打开终端，运行python -m http.server 8000（Python3环境），然后在浏览器访问http://localhost:8000/你的HTML文件名.html；
• 其他工具比如Node.js的http-server包也可以快速搭建本地服务。

2. JSON文件格式不符合规范 #

你给出的JSON示例里，所有的键（比如company、banner）都没有用双引号包裹，但JSON语法严格要求键必须是双引号包裹的字符串，否则response.json()会解析失败，直接抛出错误。

修正后的JSON示例：

[
  {
    "company": "text",
    "banner": "text",
    "icon": "text",
    "locations": [
      {
        "name": "text",
        "img": "text",
        "latLong": [123, 456],
        "address": "text",
        "postcode": "text",
        "tenants": [
          {
            "company": "text",
            "banner": "text",
            "icon": "text"
          }
        ]
      }
    ]
  }
]

3. async/await和.then()混合使用导致逻辑混乱 #

你在代码里同时用了await和.then()，这不仅没必要，还会让逻辑变复杂：你await的是最后一个.then()的返回值，而console.log()返回的是undefined，所以loc1最终会是undefined。另外，这种混合写法如果出错，错误很难被捕获。

4. 缺少错误处理机制 #

你的代码没有任何错误捕获逻辑，如果fetch失败（比如文件找不到）或者JSON解析失败，错误会静默抛出，导致函数直接停止，你甚至看不到错误信息。

修正后的完整JavaScript代码 #

async function sortLocations() {
  console.log('1');
  try {
    // 用纯async/await写法，去掉多余的.then()
    const response = await fetch("locations-test.json", {
      method: "GET",
      headers: {
        Accept: "application/json"
      }
    });

    // 先检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    const loc1 = await response.json();
    console.log(JSON.stringify(loc1));
    console.log('2');

    // 这里写你处理数据的后续代码
    // ...
  } catch (error) {
    // 捕获所有可能的错误并打印，方便排查
    console.error('处理数据时出错：', error);
  }
}

额外提示 #

在onload里调用async函数是允许的，但如果函数内部有未捕获的Promise拒绝，浏览器可能会在控制台的「Issues」面板里提示，记得去那里看看有没有未处理的错误信息。

备注：内容来源于stack exchange，提问作者SamJones04