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

【问题标题】：How to fetch data from a JSON file in aurelia framework?如何从 aurelia 框架中的 JSON 文件中获取数据？
【发布时间】：2019-09-14 18:14:18
【问题描述】：

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

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

这是我的代码：

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 文件夹中，但结果相同。

【问题讨论】：

标签： aurelia

【解决方案1】：

鉴于您使用的是 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 特定的事情。这是一个 Webpack 概念。即使理解你不能从你的 src 目录中获取文件也是一个 Webpack 的概念，而不是 Aurelia 的概念。
那么为什么还有其他通用语法存在于与 aurelia 无关的文档中？文档说要使用 aurelia-fetch-client 插件，但您的解决方案没有使用它，那么我应该如何将它放在静态文件夹中呢？应该在文档中提到。每个其他框架都解释了从外部 json 加载。现在我明白为什么这个框架不流行了。
Stack Overflow 是一个很好的地方，可以帮助您解决在开发新软件时遇到的问题。它不是贬低cmets的地方。您在此处和 GitHub 上获得了三位 Aurelia 核心团队成员的免费技术支持（您明确忽略了我们的问题模板中的说明）。您提出的问题格式不正确，因为它没有提供足够的信息来回答您的问题（我必须阅读您对答案的评论才能意识到您正在使用带有 Aurelia CLI 的 Webpack）...（续）\
（续）在获得免费支持后，即使您忽略了支持说明，您还是选择贬低我们的文档和框架本身。由志愿者开发的免费提供给您的框架。想想你的评论听起来有多么有名，并认为像你这样的 cmets 正是那种驱使开发人员远离开源开发的评论。下一次，也许考虑不要发表那样的评论。

【解决方案2】：

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

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

【讨论】：

把它放在dist文件夹中按预期工作，但如果我这样做au build --env prod，那么整个dist文件夹将被替换并且json文件消失，可能需要在webpack.config.js中配置它所以它会自动复制，完成后我会回来的。