POST-запрос к локальному файлу JSON с использованием HttpClient

Question

У меня есть один json файл с именем fake.json внутри ресурсов в моем угловом приложении.Путь к этому файлу такой.

MyApp => src => assets => json => fake.json

Я хочу сделать запрос POSTв этот файл с помощью HttpClient в моем компоненте, который находится внутри папки приложения.

MyApp => src => app => Statistics => statistics.component.ts

Исходный код компонента

export class StatisticsComponent {

  persons: Person[];

  options = {
    sDom: 'rt<"bottom"p>',
    pagingType: 'full_numbers',
    pageLength: 10,
    serverSide: true,
    processing: true,
    ajax: (dataTablesParameters: any, callback) => {
      this.http
        .post<DataTablesResponse>(
          './../../assets/json/fake.json',
          dataTablesParameters, {}
        ).subscribe(resp => {
          this.persons = resp.data;
          callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsFiltered,
            data: []
          });
        });
    },
    columns: [
      { data: "id" },
      { data: "firstName" },
      { data: "lastName" }
    ]
  };

  constructor(private http: HttpClient) {

  }

}

class Person {
  id: number;
  firstName: string;
  lastName: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

Я обнаружил следующую ошибку

HttpErrorResponse Http-ответ об ошибке для http://localhost:4200/assets/json/fake.json: 404 Не найдено

Iполучил 2 сомнения по этому поводу.

1. Допустимо ли сделать POST запрос к локальному файлу json, используя Http или HttpClient.(До сих пор я сделал GET запрос с использованием Http, а не HttpClient и получил данные успешно)

2. Почему он возвращает 404 Not Found, когда файл находится там внутри папки.

Нужна помощь.

Answer 1

Это потому, что все, что вы поместите в папку assets, будет обслуживаться через GET запросы.Вы можете проверить это, просто перейдя на http://localhost:4200/assets/json/fake.json в браузере.Если вы хотите проверить метод POST, вам нужно запустить сервер.

HttpModule устарела и удалена в более поздних версиях Angular.Вы должны изменить его на HttpClientModule

Чтобы проверить это с HttpClient, вы можете сделать следующее.

Добавить HttpClientModule к вашему AppModule

InjectHttpClient внутри вашего компонента

constructor(private httpClient: HttpClient) {}

И сделайте запрос следующим образом

this.http.get('/assets/json/fake.json',  { observe: 'body' })
    .subscribe(result => {
      console.log(result);
    });

Answer 2

Для чтения или записи данных из локального файла JSON вы можете использовать json-сервер.

1. Создать файл fake.json.
2. Установить json-сервер npm i json-server.
3. Запустите сервер JSON json-server --watch fake.json.
4. Теперь запросите сервер на http://localhost:3000/

Перейдите по ссылке документации: https://www.npmjs.com/package/json-server