Angular PWA中如何延迟GET Observable直到离线操作处理完成

需求说明 #

• 现有遗留代码封装了GET请求处理逻辑，自带防重复调用、PWA离线缓存GET请求等原生特性
• 业务要求所有POST/PUT/DELETE离线操作全部提交完成后，才能执行任意GET请求
• 已定义Observable类型变量$processingOfflineOperation，会返回布尔值标识离线操作的处理状态，需要等待该变量抛出false值后再触发GET请求

之前可行实现的缺陷 #

最后给出的嵌套订阅版本虽然可以正常运行，但存在以下问题：

• 嵌套订阅不符合RxJS最佳实践，代码冗余难以维护
• 没有手动销毁对$processingOfflineOperation和getReal返回流的订阅，存在内存泄漏风险
• 手动创建Subject转发结果，多了不必要的中间层

最优实现方案 #

保留原GET请求逻辑不动，重命名为getReal，新的get方法使用RxJS高阶操作符实现延迟逻辑：

public get(endpoint: string, params?: any, avoidCache?: boolean, reqOpts?: any, ignoreHTTPStatusCode?: HttpStatusCode[]): Observable<any> {
  return this.$processingOfflineOperation.pipe(
    // 仅保留离线操作处理完成的状态
    filter(isProcessing => !isProcessing),
    // 取第一个完成状态后自动取消对$processingOfflineOperation的订阅，避免内存泄漏
    take(1),
    // 切换到真实的GET请求流
    switchMap(() => this.getReal(endpoint, params, avoidCache, reqOpts, ignoreHTTPStatusCode))
  )
}

实现优势 #

1. 完全不改动原有getReal的逻辑，防重复调用、离线缓存等原生特性全部保留，不会破坏原有行为
2. 没有嵌套订阅、没有手动创建Subject，符合RxJS流式编程规范，代码简洁易维护
3. 自动处理订阅销毁，无内存泄漏风险
4. 所有请求结果、错误信息都会正常向下游传递，不需要手动转发回调

之前尝试失败的原因 #

• 直接对getReal的返回流加filter和take(1)：仅过滤了请求的返回结果，没有延迟请求本身的触发时机，请求还是会立刻发出
• 使用skipUntil的写法：调用getReal时请求就已经触发，skipUntil只是跳过了结果的返回，没有阻止请求发送，不符合业务要求

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