Синхронизация метода тяжелой / длинной загрузки в Angular и TypeScript

Question

Мы используем TypeScript и Angular 6 в нашем проекте, и у нас есть класс обслуживания для инъекций:

@Injectable()
export class ProductService {
    getAllProducts(): Observable<Product[]> {
        return this.http.get('/products')
    }
}

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

Мы хотели бы разрешить каждому компоненту использовать:

this.productService.getAllProducts().subscribe(products => ...)

Но это запускает три отдельные вызовы HTTPс синтаксическим анализом JSON на стороне клиента и т. д.

Недальновидным маршрутом будет получение Product[] один раз на самой внешней странице и полная передача этих данных.вплоть до компонента.Мне это не нравится, потому что наш код становится грубым, и у каждого промежуточного компонента теперь есть еще одна вещь, которую он должен нести / передавать детям.

Если бы это был Java, я бы просто synchronize имел доступ к *Метод 1021 * и кешируйте результат в ProductService, возвращая кешированную копию, если она существует.

Как можно получить аналогичный (быстрый + чистый) результат, используя Angular / TypeScript?

Answer 1

Вы можете реализовать очень быструю систему кэширования:

@Injectable()
export class ProductService {

    products$ = new BehaviorSubject([]);

    getAllProducts(): Observable<Product[]> {
      return this.products$.asObservable();
    }

    updateProductsList() {
      this.http.get('/products').subscribe(products => this.products$.next(products));
    }
}

Answer 2

Вы ищете оператора акций RxJS.

  constructor(private httpClient: HttpClient){
    this.dataFromServer$ = this.httpClient.get<any[]>('https://jsonplaceholder.typicode.com/posts');
    this.sharedData$ = this.httpClient.get<any[]>('https://jsonplaceholder.typicode.com/posts/1').pipe(share()) 

    // Creates 3 Requests
    this.dataFromServer$.subscribe()
    this.dataFromServer$.subscribe()
    this.dataFromServer$.subscribe()


    // Creates 1 Request
    this.sharedData$.subscribe()
    this.sharedData$.subscribe()
    this.sharedData$.subscribe()
  }

https://stackblitz.com/edit/angular-zsw7zq?file=src%2Fapp%2Fapp.component.ts

Иногда рекомендуется использовать shareReplay .Когда подписка может произойти после успешного выполнения запроса.

Для дальнейшего чтения я могу порекомендовать ключевые слова "угловая горячая / холодная наблюдаемая".