Как получить данные из файла 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, но получаю следующую ошибку:
Вот моя структура папок, созданная с помощью aurelia-cli
Как видите, sample.json находится внутри папки src, и я попытался поместить его в папку src/Assets, но результат тот же.
Ответы 2
Причина, по которой он выдает вам 404, заключается в том, что на веб-сервере разработки нет этого файла, поскольку вы можете видеть, откуда он пытался получить файл: http://localhost:8080/sample.json
Что вы можете сделать, так это убедиться, что он идет на ваш сервер разработки, возможно, поместив его в ту же папку с вашими активами, такими как изображения. Если вы используете aurelia-cli, возможно, вы также можете поместить его в папку dist.
Учитывая, что вы используете 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.info('JSON loaded via import', importedData);
console.info('JSON loaded via fetch', fetchedData);
}
}
Наконец, консоль при запуске приложения:
Что касается размещения этого в документах, это не совсем специфично для Aurelia. Это концепция Webpack. Даже понимание того, что вы не можете получить файлы из своего каталога src, является концепцией Webpack в большей степени, чем концепция Aurelia.
Тогда почему в документах содержится другой общий синтаксис, не связанный с aurelia? Документы говорят использовать плагин aurelia-fetch-client, но ваше решение не использовало его, тогда как я должен поместить его в статическую папку в первую очередь? Должен был упомянуть в документах. Все остальные фреймворки объясняют загрузку из внешнего json. Теперь я понимаю, почему этот фреймворк не популярен.
Stack Overflow — прекрасное место, где можно получить помощь в решении проблем, с которыми вы сталкиваетесь при разработке нового программного обеспечения. Это не место для пренебрежительных комментариев. Вы получили бесплатную техническую поддержку от трех членов основной команды Aurelia как здесь, так и на GitHub (где вы явно проигнорировали инструкции в нашем шаблоне задачи). Заданный вами вопрос не был правильно сформулирован, так как он не содержал адекватной информации для ответа на ваш вопрос (мне пришлось прочитать ваш комментарий к ответу, чтобы понять, что вы используете Webpack с интерфейсом командной строки Aurelia)... (продолжение)\
(продолжение) После получения бесплатной поддержки, даже несмотря на то, что вы проигнорировали инструкции по поддержке, вы решили умалить нашу документацию и саму структуру. Бесплатный фреймворк, разработанный волонтерами. Подумайте о том, насколько правдоподобно звучит ваш комментарий, и учтите, что такие комментарии, как ваш, — это именно тот тип комментариев, который отталкивает разработчиков от разработки с открытым исходным кодом. И в следующий раз, может быть, подумайте о том, чтобы не делать такой комментарий.
Помещение его в папку
distсработало, как и ожидалось, но если я это сделаюau build --env prod, то вся папка dist будет заменена, а файл json исчезнет, возможно, нужно настроить это вwebpack.config.js, чтобы он копировался автоматически, я вернусь, как только это будет сделано.