如何在Component Store Effect中按条件发送多个HTTP请求

要实现「第一个HTTP请求返回true才发起第二个请求，且共用同一参数」的逻辑，你可以通过RxJS操作符串联请求，修正后的Effect代码如下：

import { EMPTY } from 'rxjs';
import { switchMap, filter, tap, catchError } from 'rxjs/operators';

readonly getDefinition = this.effect((id$: Observable<string>) => {
  return id$.pipe(
    switchMap((id) => 
      // 先发起第一个请求
      firstHttpCall(id).pipe(
        // 仅当第一个请求返回true时，才继续执行后续逻辑
        filter((firstResult) => firstResult === true),
        // 发起第二个请求，传递相同的id参数
        switchMap(() => secondHttpCall(id)),
        // 处理第二个请求的结果（按需添加）
        tap((secondResult) => {
          // 这里写第二个请求成功后的逻辑，比如更新状态、处理返回数据
        }),
        // 捕获请求错误，避免Effect因异常终止
        catchError((error) => {
          // 按需处理错误，比如dispatch错误action、记录日志
          return EMPTY;
        })
      )
    )
  );
});

关键逻辑说明： #

• switchMap：接收上游的id参数，同时如果新的id触发，会取消之前未完成的请求，避免重复请求堆积。
• filter：对第一个请求的结果做过滤，只有返回true时，才会进入下一个操作符发起第二个请求。
• 内层switchMap：在第一个请求满足条件后，发起第二个请求，复用同一个id参数。
• catchError：捕获整个请求链中的错误，返回EMPTY可保证Effect继续正常工作，不会因单次请求失败而失效。

如果需要分别处理第一个请求的结果（无论是否为true），可以在filter之前加一个tap：

firstHttpCall(id).pipe(
  tap((firstResult) => {
    // 处理第一个请求的结果，比如记录日志、更新部分状态
  }),
  filter((firstResult) => firstResult === true),
  // ...后续逻辑
)

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