Angular 9中如何在service文件内按条件判断获取数据？

你的代码错误点在于：当localStorage存在缓存数据时，你错误调用httpClient.get()请求已拿到的数组对象，这会导致请求路径异常报错，这一步完全不需要发请求，直接把本地缓存数据包装为Observable返回即可。

service.ts #

// 前置导入（RxJS 6+ 版本）
import { of, Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

// 类内方法实现
getOrganisationsList(): Observable<any> {
  // 读取本地缓存
  const cachedOrg = localStorage.getItem('organisation');
  // 有缓存直接返回
  if (cachedOrg) {
    return of(JSON.parse(cachedOrg));
  }
  // 无缓存发起接口请求
  const API_URL = `${this.env.apiUrl}/Organisations`;
  return this.httpClient.get(API_URL).pipe(
    map((data: any) => {
      const orgList = data['Data']['Organisations'];
      // 接口返回后写入本地缓存
      localStorage.setItem('organisation', JSON.stringify(orgList));
      return orgList;
    }),
    catchError((error: any) => {
      return Observable.throw(error);
    })
  );
}

如果你使用的是RxJS 5.x旧版本，只需去掉pipe包装，直接链式调用.map()、.catch()，同时把of()替换为Observable.of()即可。

component.ts #

原有代码无需修改，订阅逻辑可正常适配缓存和接口两种返回场景：

getOwnedOrganisatons() {
  this.orgService.getOrganisationsList().subscribe((resp) => {
    console.log('response', resp);
    this.organisationList = resp;
  });
}

• 新增缓存有效期校验：存储数据时同步写入时间戳，读取时判断缓存是否过期，过期则重新请求接口获取最新数据
• 替换any类型为明确的组织机构类型定义，提升TypeScript类型安全性
• 增加localStorage写入异常捕获，兼容用户禁用本地存储的场景

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