Javascript 使用fetch和ES6加载本地JSON文件

导言

[
  {
    "country": [
      {
        "name": "Spain",
        "GDP": " $1234",
        "Regions": " Europe ",
        "Align": " Western "
      }
    ]
  }
]

我有一个本地文件

'countryballs.json'

，我想将其加载到html中，并将数据解析到

index.html

中

我想用的方法，也是我唯一知道的方法，就是使用。很容易使用

代码

async function getData()
        {
            await fetch('./countryballs.json')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
            })
            .catch(function (error) {
                console.log(error);
            })
        }
        getData();

代码解释

[
  {
    "country": [
      {
        "name": "Spain",
        "GDP": " $1234",
        "Regions": " Europe ",
        "Align": " Western "
      }
    ]
  }
]

Fetch应该在异步函数中使用，因为它返回承诺（加载文件需要时间）

wait fetch（）//将等待，直到加载完所有内容。代码的其余部分是自解释的ES6JS编码

问题

当使用外部API（用于天气、金融等）时，它工作得非常完美，我可以检索和解析数据，一切都很顺利。甚至加载本地CVS文件但不使用我的本地JSON文件。

错误

index.html:15 GET http://localhost:8080/countryballs.json 404 (Not Found)

XMLHttprequest日志：

index.html:15 Fetch failed loading: GET "http://localhost:8080/countryballs.json".

问题

• 为什么它不能处理JSON文件呢
• 代码中缺少了什么

Example.json

[
  {
    "country": [
      {
        "name": "Spain",
        "GDP": " $1234",
        "Regions": " Europe ",
        "Align": " Western "
      }
    ]
  }
]

有类似问题但解决方案不同的人，或者对我不起作用

async function getData()
        {
            await fetch('./countryballs.json')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
            })
            .catch(function (error) {
                console.log(error);
            })
        }
        getData();

进一步解释以了解问题

• 我正在使用的文件夹如下所示：
  • 节点模块

  • index.html

  • countryballs.json

• 我正在使用Node.js和Visual Studio代码

• index.html使用Chrome浏览器在本地主机8080上运行

我考虑过的可能解决方案

• 使用文件系统加载它（但仍要尝试fetch（））

问题的图像库

（Chrome的控制台输出）

编辑：

根据你们中的一些人的要求，我将提供我在这里和下面的测试说明

---

一周前也有同样的问题。我认为response.json（）也会返回一个承诺。@KaiLehmann是的，你需要等待。但是它已经在异步函数中“等待”响应了。不，返回到.then（）的内容实际上是一个承诺。console.log（data？）怎么说？@CMS我在文件夹上运行

node http server

，然后使用浏览器连接到

localhost:8080

您的响应是一个简单的404。有几种可能性：1）您的服务器（节点）设置不正确，无法将

.json

识别为MIME类型；2）您的路径完全错误；或3）您在服务器上实现了一个catchall路由，该路由会抢先发送文件，并且由于没有到该URL的路由，因此您的服务器使用404。（这是最有可能的情况）。一周前也有同样的问题。我认为response.json（）也会返回一个承诺。@KaiLehmann是的，你需要等待。但是它已经在异步函数中“等待”响应了。不，返回到.then（）的内容实际上是一个承诺。console.log（data？）怎么说？@CMS我在文件夹上运行

node http server

，然后使用浏览器连接到

localhost:8080

您的响应是一个简单的404。有几种可能性：1）您的服务器（节点）设置不正确，无法将

.json

识别为MIME类型；2）您的路径完全错误；或3）您在服务器上实现了一个catchall路由，该路由会抢先发送文件，并且由于没有到该URL的路由，因此您的服务器使用404。（这是最有可能的情况）。