RxJs distinctUntilChanged()仍发射相同内容对象问题求助

你的问题核心在于两个关键点：Observable的冷热特性未正确处理，以及数据流未多播导致重复订阅逻辑冲突。以下是具体问题拆解和修正方案：

问题根源 #

1. cachedCartData$的定义错误：你将其定义为类初始化时创建的单一冷Observable实例，第一次订阅后它会完成并缓存结果，后续订阅只会重放旧值，无法触发新的API请求；若改为每次创建新的Observable，又会因多订阅导致重复请求。
2. cart$未多播：多个组件用async管道订阅时，每个订阅都会独立执行整个管道，导致每个订阅的distinctUntilChanged状态独立，初始订阅时因prev为undefined必然发射值，且重复发起API请求。

修正代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { mergeMap, distinctUntilChanged, shareReplay } from 'rxjs/operators';
import { isEqual } from 'lodash';

// 根据API返回结构定义类型
interface CartItem {
  id: string;
  // 补充其他属性
}

@Injectable({
  providedIn: 'root',
})
export class CustomerFacadeService {
  private eventBus$ = new BehaviorSubject<void>(undefined);

  constructor(private http: HttpClient) {}

  // 改为工厂函数，每次调用返回新的HTTP请求Observable
  private getCartData$(): Observable<CartItem[]> {
    return this.http.get<CartItem[]>('https://62c41dc97d83a75e39f0d512.mockapi.io/api/v1/cart');
  }

  cart$ = this.eventBus$.pipe(
    mergeMap(() => this.getCartData$()),
    distinctUntilChanged((prev, current) => {
      const areEqual = isEqual(prev, current);
      console.log('内容是否相等:', areEqual);
      return areEqual;
    }),
    shareReplay(1), // 多播数据流，缓存最新值，避免重复请求
  );

  cacheBust() {
    this.eventBus$.next();
  }
}

关键修正点说明 #

1. 工厂函数替代单一Observable实例：getCartData$()每次调用都会返回新的http.get() Observable，确保点击Update按钮时能发起新的API请求，而不是重放旧结果。
2. 添加shareReplay(1)操作符：
   • 多播数据流，让所有组件订阅者共享同一管道执行，避免重复发起API请求。
   • 缓存最新的1个结果，新订阅者会立即收到缓存值，无需重新请求。
3. 明确类型定义：添加CartItem接口，避免类型隐式转换导致的潜在问题。

修正后，当API返回内容与前一次相同时，distinctUntilChanged会通过isEqual判断为相等，不会发射next通知；只有内容变化时才会触发通知，同时多个组件订阅只会发起一次请求，共享结果。

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