повторяющиеся запросы в угловом компоненте

Question

У меня есть компонент и служба, которая получает связанные с компонентом данные с сервера.Я вызываю эту службу внутри файла .ts компонента, подписанного на функцию, которая использует ее для извлечения данных.Затем я использую этот компонент несколько раз в шаблоне другого компонента.Очевидно, это приводит к тому, что многие http GET-запросы (в моем случае это GET-запросы) - все они полностью идентичны.Я хотел бы избежать этого любыми возможными способами.Я знаю, что, возможно, одним из возможных решений было бы вызвать службу в файле ts родительского компонента, а затем просто вставить данные в дочерний элемент.Но есть ли другие способы сделать это?Потому что кажется рациональным называть эту службу там, где она есть сейчас.

Answer 1

Когда вы подписываетесь на наблюдаемую из службы http, http-запрос запускается, как только запрос завершен, наблюдаемая завершается. Если будет сделана другая подписка, тогда снова сработает другой запрос.

Вам необходимо кэшировать результат запроса, если вы не хотите, чтобы другой запрос снова попадал на сервер.

Я написал библиотеку с именем ngx-rxcache, и это одна из ее основных целей.

https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Установить библиотеку с помощью «npm install ngx-rxcache»

Затем вы можете создать справочную службу данных

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { RxCacheService } from 'ngx-rxcache';

@Injectable({
  providedIn: 'root'
})
export class RefDataService {
  private titlesCache = this.cache.get<any[]>({
    id: '[RefData] titles',
    construct: () => this.http.get<any[]>('titles'),
    autoload: true
  });

  constructor(
    private http: HttpClient,
    private cache: RxCacheService
  ) { }

  get titles$(): Observable<any[]> {
    return this.titlesCache.value$;
  }
}

Это создаст сервис с заголовками $ observable, при первой подписке на него будет запущен http-запрос, и каждый раз после этого он будет получать его из кэша.

Функция конструктора должна возвращать наблюдаемую информацию о типе кэша, в этом случае вызов заголовков http получает конечную точку. Свойство autoload указывает кэшу вызывать функцию конструктора при первом обращении к значению.