问题描述
我在使用 rxjs
的 Angular 应用程序中编写了以下效果。在 MyActions.myAction
上,我收到一个包含属性 ids
的对象 - 一个 id 数组 - 对于每个 id 我想通过 this.myApiService.getResource
发送一个 HTTP 请求,它返回一个 {{1} }.然后我想将所有结果收集到一个数组中,然后调度另一个传递该数组的操作。
Observable<Resource>
上面的代码完成了这项工作,但我想知道我是否应该避免嵌套两个响应式操作符流,以及是否有更好的编写方法。
我想知道的原因是我在为它编写测试时遇到了问题。我写了下面的测试,但我无法通过。
public loadResources$: Observable<MyAction> = this.actions$.pipe(
ofType(MyActions.myAction),switchMap(({ ids }) => from(ids).pipe(
mergeMap(id => this.myApiService.getResource(id)),toArray()
)),map(resources) => MyActions.resourcesLoaded({ resources } )),);
我得到的错误是:
it('should dispatch an resourcesLoaded action with the resources',() => {
const ids = ['5f7c723832758b859bd8f866'];
const resources = [{} as Resource];
const values = {
l: MyActions.loadResources({ ids }),t: ids[0],o: MyActions.resourcesLoaded({ resources })
};
actions = hot('--l------------',values);
const get$ = cold(' -------t-----',values);
const expected = cold('---------o-----',values);
myApiService.getResource.withArgs(ids[0]).returns(get$);
expect(myEffects.loadResources$).toBeObservable(expected);
});
解决方法
我发现我的测试失败了,因为 toArray
正在等待 getResource
(即 httpClient.get
)返回的 observable 完成。用 t
替换 (t|)
修复了测试:
it('should dispatch an resourcesLoaded action with the resources',() => {
const ids = ['5f7c723832758b859bd8f866'];
const resources = [{} as Resource];
const values = {
l: MyActions.loadResources({ ids }),t: ids[0],o: MyActions.resourcesLoaded({ resources })
};
actions = hot('--l------------',values);
const get$ = cold(' -------(t|)-----',values);
const expected = cold('---------o-----',values);
myApiService.getResource.withArgs(ids[0]).returns(get$);
expect(myEffects.loadResources$).toBeObservable(expected);
});
然而,我问题的第一部分,即像这样嵌套操作符是否是好的做法,仍然有效。
,但我想知道我是否应该避免嵌套两个反应式运算符流,以及是否有更好的方法来编写
我认为这取决于您想要实现的目标,至少在这种情况下是这样。
of([1,2,3]).pipe(mergeAll(),switchMap(value => http.get(...)))
不同于
of([1,3]).pipe(switchMap(ids => from(ids).pipe(mergeMap(...))))
在第一种情况下,每个内部 observable 都会被下一个值(最后一个值除外)丢弃,因此只有 3 个会被解析。
在第二种情况下,它将处理所有这些,因为您在内部 observable(由 swtichMap
管理,因此其内部 observable 将被丢弃的唯一方法是如果一个新的外部值(例如另一个 id 数组)由源发出)。
不需要嵌套的情况是:
of([1,3])
.pipe(
// whenever you want to explode an array,// it does not matter which higher order operator you use
// since the operation is **synchronous**
// so,`mergeAll`,`concatAll`,`switchAll` should work the same
mergeAll(),mergeAll(id => this.apiService.useId(id))
)
// same as
of([1,3])
.pipe(
mergeMap(ids => from(ids).pipe(mergeMap(id => this.apiService.useId(id))))
)
如您所见,在本例中,switchMap
已替换为 mergeMap
。