Question

我正在使用Angular 8，Ionic 4并尝试通过缓存来减少服务器调用

我有一个返回Observable的搜索服务。

我想知道是否可以使用路由器访问该服务中的功能。

例如：在类似{path：'api /：func /：term'，component：ApiComponent}

的路由中

然后在页面中，我将发出请求以请求api路由，例如： http.get（'/ api / search-cars / corvette'）将路由到searchCars（term：string）函数，并以corvette作为参数。这是一个过滤器函数，返回RXJS存储中数组的一部分。

这样做的目的是为了能够缓存该请求的URL，以便每次对数据进行排序时都不会命中服务器。

当我尝试挂钩时，出现404错误。有没有创建内部API的方法？

Answer 1

我认为您不需要伪造的HTTP请求。正如您所说的，您有一个服务层，因此您可以在向端点发出第一个请求时存储服务器结果。这里有一些想法：

1-ShareReplay：在其中保留对订户doc

的请求

2-存储：将请求数据保存在客户端存储（例如本地存储或其他存储空间）

  listUsers(): Observable<User[]>{

    const storageUsers = localStorage.getItem('users');

    return storageUsers 
    ? of<User[]>(storageUsers) 
    : this.http.get<User[]>(`some-end-point/users`)
       .pipe(
         tap(users => localStorage.setItem('users', users))
       );      
  }

3- Redux Doc

Answer 2

路由器用于在浏览器地址栏中指定位置的情况下显示组件。您可以通过几种方式存储过去的请求，但是对于您的用例来说，服务就足够了。

鉴于您共享的信息，我对您的API使用情况做出了一些假设，我要共享的StackBlitz需要更多的工作才能成为完整的解决方案，但是您可以在此处查看动态的“缓存”服务： https://stackblitz.com/edit/angular-vhijkx

我已经使用了一个映射来存储对过去请求的响应，但是在给定用例的情况下，您也可以使用单个变量。为了将“缓存”保留在页面加载之后，可以将其进行字符串化并放置在localStorage或sessionStorage中。

private cache: Map<string,any[]> = new Map();

getRequest(endpoint: string, termQuery: string): Observable<any> {
  const url = `${this.apiBase}/${endpoint}`,
    params = new HttpParams().set(this.term, termQuery),
    storeId = `${endpoint}:${termQuery}`,
    cache = this.cache.get(storeId);

  if (cache) {
    console.log('fetched from cache');
    return of(cache);
  } else {
    console.log('fetched from API');
    return this.http.get(url, {params}).pipe(
      tap(response => {
        this.cache.set(storeId,response);
      })
    );
  }
}

此方法首先检查是否已存在缓存的条目。如果是这样，它将立即返回其Observable，否则它将发出API请求，并且在接收到响应时，将设置缓存并返回Observable。

使用Angular路由发出Http请求？

2 个答案: