Как получить данные из файла JSON в рамках aurelia?

Я пытаюсь получить данные из внешнего файла JSON, используя aurelia-fetch-клиент, но выдает ошибку 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.info(res);
 }
}
}

Я должен получить результат данных JSON, но получаю следующую ошибку:

Как получить данные из файла JSON в рамках aurelia?

Вот моя структура папок, созданная с помощью aurelia-cli

Как получить данные из файла JSON в рамках aurelia?

Как видите, sample.json находится внутри папки src, и я попытался поместить его в папку src/Assets, но результат тот же.

🤔 А знаете ли вы, что...
Фреймворк предоставляет множество хуков жизненного цикла компонентов для управления их поведением.

[РЕШЕНО]Перейти к решению

811

Aurelia384 вопроса

Ответы:

Причина, по которой он выдает вам 404, заключается в том, что на веб-сервере разработки нет этого файла, поскольку вы можете видеть, откуда он пытался получить файл: http://localhost:8080/sample.json

Что вы можете сделать, так это убедиться, что он идет на ваш сервер разработки, возможно, поместив его в ту же папку с вашими активами, такими как изображения. Если вы используете aurelia-cli, возможно, вы также можете поместить его в папку dist.

Решено

Учитывая, что вы используете Webpack, у вас есть два варианта:

Сохраните файл в каталоге src и используйте оператор require для его загрузки.
Переместите файл в папку static и загрузите его с помощью fetch.

Вот скриншот примера с обоими:

Screenshot showing using both require and fetch for loading a json file

И исходный код:

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

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

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

Наконец, консоль при запуске приложения:

Как получить данные из файла JSON в рамках aurelia?

Ответы:

Интересные вопросы для изучения