如何从 aurelia 框架中的 JSON 文件中获取数据？

Question

我正在尝试使用 aurelia-fetch-client 从外部 JSON 文件中获取数据，但它给出了 404 未找到错误。

我已经尝试实施官方文档建议的基本设置。

这是我的代码：

import {HttpClient } from 'aurelia-fetch-client';

let httpClient = new HttpClient();
export class ChangeRequest {
constructor(){
  httpClient.fetch('sample.json')
    .then(response => response.json())
    .then(res => {
      console.log(res);
 }
}
}

我应该得到 JSON 数据的结果，但我收到以下错误：

这是我使用 aurelia-cli

创建的文件夹结构

如您所见，sample.json 位于 src 文件夹中，我尝试将其放入 src/Assets 文件夹中，但结果相同。

Answer 1

它给你 404 的原因是开发网络服务器没有那个文件，你可以看到它试图从哪里获取文件：http://localhost:8080/sample.json

你可以做的是确保它进入你的开发服务器，可能是将它放在与你的资产（如图像）相同的文件夹中。如果您使用的是 aurelia-cli，也许您也可以将其放入 dist 文件夹。

Answer 2

鉴于您使用的是 Webpack，您有两个选择：

将文件保存在src目录下，使用require语句加载
将文件移动到 static 文件夹并使用 fetch 加载它。

这是一个示例的屏幕截图：

以及源代码：

export class App {
  async attached() {
    const importedData = require('./in-src.json');

    const fetchedData = await fetch('in-static.json')
      .then(response => response.json());

    console.log('JSON loaded via import', importedData);
    console.log('JSON loaded via fetch', fetchedData);
  }
}

最后，应用程序时的控制台运行:

如何从 aurelia 框架中的 JSON 文件中获取数据？

How to fetch data from a JSON file in aurelia framework?

aurelia