使用 RxJS 和 shareReplay 在 Angular 中更新缓存的 http 请求答案

【问题标题】：Updating cached http request in Angular with RxJS and shareReplay使用 RxJS 和 shareReplay 在 Angular 中更新缓存的 http 请求
【发布时间】：2021-06-23 14:24:21
【问题描述】：

我在我的 Angular 应用程序中创建了一个服务来创建单个 http 调用并使用 RxJS 和 shareReplay 缓存结果，如下所示：

export class ApiService {

  data$: Observable<any>;

  constructor(
    private http: HttpClient,
  ) { }
  
  loadData(lang:string) {
    this.data$ = this.http.get(APP_ENDPOINT + '?lang=' + lang).pipe(
      shareReplay(1)
    );
  }

  getData() {
    return this.data$;
  }
}

如果我的应用程序中的语言发生变化，我正在尝试弄清楚如何更新我的 data$ observable，因为我需要一个新的 http 请求并在请求中传递 lang 变量。

“重置”缓存的 data$ 并创建新的 http 调用以获取该语言的新数据的最佳方法是什么？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

您可以利用 observables/subjects 来触发新的响应；像这样：

export class ApiService {
  lang$ = new BehaviorSubject("myDefaultLang");

  data$ = this.lang.pipe(
    switchMap((lang)=> this.http.get(APP_ENDPOINT + '?lang=' + lang)),
    shareReplay(1),
  );

  constructor(
    private http: HttpClient,
  ) { }
  
  loadData(lang:string) {
    this.lang$.next(lang)
  }

  getData() {
    return this.data$;
  }
}

【讨论】：

【解决方案2】：

您可以将 language 设为 observable，然后从 language$ 定义您的 data$：

export class ApiService {

  private language$ = new BehaviorSubject('en-US');

  data$: Observable<any>;

  constructor(
    private http: HttpClient,
  ) { }
  
  loadData(lang:string) {
    this.data$ = this.language$.pipe(
      switchMap(lang => this.http.get(`${APP_ENDPOINT}?lang=${lang}`),
      shareReplay(1)
    );
  }

  getData() {
    return this.data$;
  }

  setLanguage(language: string) {
    this.language$.next(language);
  }
}

注意：由于 observables 是惰性的，因此您实际上并不需要 getData$ 方法。消费者可以直接参考data$。订阅行为是“获取”数据的行为。

您可以直接在组件上定义data$。

export class ApiService {

  private language$ = new BehaviorSubject('en-US');

  data$: Observable<any> = this.language$.pipe(
    switchMap(lang => this.http.get(`${APP_ENDPOINT}?lang=${lang}`),
    shareReplay()
  );

  constructor(
    private http: HttpClient,
  ) { }

  setLanguage(language: string) {
    this.language$.next(language);
  }
}

【讨论】：