如何在RxJS的switchMap中区分首次与后续调用设置加载状态

AI 小北

2026-7-17

问题

我的服务中HTTP请求方法带有showLoadingSpinner参数，当该参数设为false时，HttpContext中的DISABLE_LOADER_FOR_REQUEST会被设为true。我希望首次调用时显示加载Spinner，后续调用则不显示，且不想额外创建状态变量，能否通过RxJS运算符在switchMap中判断是否为首次调用实现需求？

不想采用的写法：

isFirstCall = true;

fetchData(): Observable<Bla> {
    return this.reload$.pipe(
        switchMap(() => this.service.fetch(this.isFirstCall)),
        tap(() => this.isFirstCall = false)
    );
}

期望的写法：

fetchData(): Observable<Bla> {
    return this.reload$.pipe(
        switchMap(() => this.service.fetch(<此处需通过RxJS运算符判断是否为首次发射>))
    );
}

解决方案

用RxJS的scan运算符就能在流内部维护调用状态，不用额外声明外部变量。scan可以帮我们累积每次发射的状态，刚好用来追踪是否是首次调用：

fetchData(): Observable<Bla> {
    return this.reload$.pipe(
        // 初始状态设为true（表示首次调用），每触发一次就把状态改成false
        scan((_prevIsFirst) => false, true),
        // 根据当前状态传参：首次传true显示加载，之后传false禁用加载
        switchMap((isFirstCall) => this.service.fetch(isFirstCall))
    );
}

简单说明逻辑：

scan的初始值是true，对应第一次触发reload$时，传给switchMap的isFirstCall为true，调用服务时显示加载。
之后每次reload$触发，scan都会返回false，所以后续所有调用都会传false，自动禁用加载。
整个状态都在流内部维护，完全不需要额外的外部变量。