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

У меня есть один 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 не найдено

У меня есть 2 сомнения по этому поводу.

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

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

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


angular angular-httpclient
person Rishikesh Dehariya    schedule 26.02.2019    source источник
comment
пожалуйста, проверьте эту ветку: https://stackoverflow.com/questions/42033357/angular2-http-post-to-local-json-file   -  person adibro500    schedule 26.02.2019
comment
Какую версию angular-cli вы используете?   -  person Bunyamin Coskuner    schedule 26.02.2019
comment
@BunyaminCoskuner Angular CLI версии 1.6.1   -  person Rishikesh Dehariya    schedule 26.02.2019

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

Добавьте HttpClientModule в свой AppModule

Вставьте HttpClient в свой компонент

constructor(private httpClient: HttpClient) {}

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

this.httpClient.get('/assets/json/fake.json',  { observe: 'body' })
    .subscribe(result => {
      console.log(result);
    });
person Bunyamin Coskuner    schedule 26.02.2019

arrow_upward
1
arrow_downward

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

  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

person Balaj Khan    schedule 26.02.2019