Angular首次调用API存储Observable员工列表后续复用缓存的实现问题

核心问题修复 #

你当前的代码存在两个需要调整的点：

1. 判断逻辑写反：现有if(!!this.listOfEmployees)的逻辑是「本地已有缓存时才调用接口」，和你要实现的「首次无缓存调接口、后续有缓存直接返回」的需求完全相反，需要先调整判断条件。
2. 缓存分支返回Observable：直接使用RxJS提供的of操作符，即可将已存储的数组包装为符合类型要求的Observable<Employee[]>对象。

首先需要在Service头部引入of操作符：

import { of } from 'rxjs';
// 原有其他导入保持不变

修改后的完整Service方法代码如下：

getListOfEmployeeFromAPI(data: any): Observable<Employee[]> {
  // 调整判断：无缓存时才发起接口请求
  if(!this.listOfEmployees) {
    let _url = this.myLocalURL + 'GetEmployeeList';
    return this.http.post<Employee[]>(_url, data).pipe(
      tap(result => this.storeEmployeeRecords(result)),
      catchError(err => this.errorHandler(err))
    );
  } else {
    // 用of操作符包装缓存数组，直接返回符合类型的Observable
    return of(this.listOfEmployees);
  }
}

listOfEmployees: Employee[];

storeEmployeeRecords(ListOfEmployees:Employee[]) {
  this.listOfEmployees = ListOfEmployees;
}

可选优化方案 #

如果存在多个组件同时首次调用该接口的场景，原有方案可能会触发多次重复的API请求，可以用shareReplay操作符实现更优雅的无变量缓存：

// Service内新增缓存Observable变量
private employeeCache$: Observable<Employee[]>;

getListOfEmployeeFromAPI(data: any): Observable<Employee[]> {
  if (!this.employeeCache$) {
    const _url = this.myLocalURL + 'GetEmployeeList';
    this.employeeCache$ = this.http.post<Employee[]>(_url, data).pipe(
      shareReplay(1), // 缓存1次返回结果，所有订阅者共享同一份请求
      catchError(err => {
        // 请求出错时清空缓存，允许下一次调用重新发起请求
        this.employeeCache$ = null;
        return this.errorHandler(err);
      })
    );
  }
  return this.employeeCache$;
}

使用该方案不需要额外手动维护listOfEmployees数组和存储方法。

内容的提问来源于stack exchange，提问作者Suzane