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$;
  }
}

这将创建一个具有可观察到的titles $的服务，第一次订阅该服务将触发http请求，此后每次都会从缓存中获取它。

构造函数应返回一个可观察到的缓存类型，在这种情况下，将调用标题http get端点。 autoload属性告诉缓存在第一次访问该值时调用构造函数。

角度组件中的重复请求

1 个答案: