Angular 5用Observable do实现HTTP缓存是否合理？有无更佳方案？

嘿，这个问题问得很实在！先直接给结论：单独用do操作符实现缓存不是最佳实践，它只能帮你在请求后存数据，但没法避免重复发起HTTP请求。咱们来拆解原因，再给你适配当前技术栈的更优方案。

为什么用do操作符做缓存不靠谱？ #

do（RxJS 6+改名为tap）是个副作用操作符，它只会在Observable流经过的时候执行额外逻辑（比如存缓存），但不会改变流本身的行为。也就是说：

• 如果你每次调用服务方法都返回新的http.get() Observable，那每次订阅都会发起新的HTTP请求，哪怕你用do存了缓存；
• 缓存的核心作用是避免重复请求，但do本身没有“拦截请求、返回缓存”的逻辑，必须搭配额外的缓存检查才能生效——这时候do只是缓存逻辑的一个环节，而非核心实现。

更优替代方案（适配Angular 5.1.3 + RxJS 5.5.6） #

方案1：手动缓存（简单直观，适合低更新频率场景） #

直接在服务里维护一个缓存变量，每次请求前先检查缓存是否存在，存在就直接返回缓存的Observable，不存在才发起请求并缓存结果。代码示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

@Injectable()
export class LowFreqDataService {
  // 缓存存储变量
  private cachedDataset: any;

  constructor(private http: HttpClient) {}

  getLowFreqData(): Observable<any> {
    // 先检查缓存：有缓存直接返回
    if (this.cachedDataset) {
      return Observable.of(this.cachedDataset);
    }

    // 无缓存则发起HTTP请求，请求成功后存入缓存
    return this.http.get('/api/your-low-freq-data')
      .do((responseData) => {
        this.cachedDataset = responseData;
      });
  }

  // 可选：手动清空缓存，触发重新请求（比如数据更新时调用）
  clearCache(): void {
    this.cachedDataset = null;
  }
}

这个方案逻辑清晰、容易调试，完全适配你的技术栈，还能灵活控制缓存失效时机。

方案2：用shareReplay操作符（RxJS风格的缓存实现） #

RxJS 5.5.x已经支持shareReplay操作符，它专门用来缓存Observable的发射值，并将缓存的值重发给后续所有订阅者——也就是说，它只会发起一次HTTP请求，后续订阅直接拿缓存结果。代码示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/shareReplay';

@Injectable()
export class LowFreqDataService {
  // 缓存的Observable实例
  private data$: Observable<any>;

  constructor(private http: HttpClient) {}

  getLowFreqData(): Observable<any> {
    // 如果还没有缓存的Observable，就创建并缓存
    if (!this.data$) {
      this.data$ = this.http.get('/api/your-low-freq-data')
        .shareReplay(1); // 缓存最后1个发射值（HTTP请求的响应）
    }
    return this.data$;
  }

  // 可选：清空缓存，下次调用会重新发起请求
  clearCache(): void {
    this.data$ = null;
  }
}

这个方案更贴合RxJS的响应式编程思想，不需要手动管理缓存变量，由Observable自身处理订阅和缓存逻辑。需要注意的是，RxJS 5.x的shareReplay默认不会自动取消源Observable的订阅，但因为你的数据更新频率极低，这个问题几乎可以忽略；如果需要主动更新数据，调用clearCache()即可。

总结最佳实践 #

• 如果场景非常简单，数据几乎不更新，手动缓存足够用，直观易维护；
• 如果你想遵循RxJS的响应式理念，或者需要更优雅的缓存管理，shareReplay是更好的选择；
• 单独用do操作符无法实现有效的缓存，必须搭配缓存检查逻辑——但这时候do只是辅助存储的步骤，而非核心方案。

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