如何结合RxJs与NgRx实现多REST请求并等待返回结果？

你的问题出在异步操作的时序处理上：用forEach遍历发起请求时，这些HTTP请求是异步执行的，但你立刻就返回了of(someOtherAction(array))，这时候请求还没返回结果，数组自然是空的。

要实现等待所有请求完成再触发后续Action，你可以用RxJS的forkJoin操作符——它会等待传入的所有Observable都完成后，把所有结果按顺序打包成数组返回。

正确实现代码 #

someEffect$ = createEffect(() => 
    this.action$.pipe(
        ofType(someAction),
        mergeMap(({ someValue }) => {
            // 把数组每个值转换成对应的HTTP请求Observable
            const requestObservables = someValue.map(value => 
                this.httpCall.getSomeTh(value)
            );

            // 用forkJoin等待所有请求完成，拿到结果数组
            return forkJoin(requestObservables).pipe(
                map(results => someOtherAction(results)), // 把结果数组传给目标Action
                catchError(error => {
                    // 可选：处理请求出错的情况，比如触发错误Action
                    return of(someErrorAction(error));
                })
            );
        })       
    )
);

关键说明 #

• map替代forEach：把字符串数组转换成HTTP请求的Observable数组，而不是直接发起请求
• forkJoin：专门用于等待多个异步操作全部完成的场景，只有当所有传入的Observable都发出完成信号时，才会输出结果数组
• 错误处理：建议加上catchError，避免单个请求失败导致整个Effect报错中断

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