angular.js4使用 RxJS 处理多个 Http

angular.js4使用 RxJS 处理多个 Http

mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。合并 Observable 对象

在上面示例中包含两种 Observable 类型:源 Observable 对象 - 即 source 对象内部 Observable 对象 - 即 Rx.Observable.of(`${val} World!`) 对象仅当内部的 Observable 对象发出值后,才会合并源 Observable 对象输出的值,并最终输出合并的值。forkJoinforkJoin 是 Rx 版本的 Promise.all(),即表示等到所有的 Observable 都完成后,才一次性返回值。合并多个 Observable 对象

处理 Http 请求看一下 Angular Http 服务简单示例。

通过依赖注入方式注入 http 服务,然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。看一下如何处理两个请求。Map 和 Subscribe发送下一个请求时,需要依赖于上一个请求的数据。在需要在上一个请求的回调函数中获取相应数据,然后在发起另一个 HTTP 请求。

在上面示例中,从地址获取所有用户的信息,然后再根据指定用户的 username 进一步获取用户的详细信息。虽然功能实现了,但有没有更好的解决方案答案是有的,可以通过 RxJS 库中提供的 mergeMap 操作符来优化上述的流程。

在上面示例中,通过 mergeMap 操作符,解决了嵌套订阅的问题。最后来看一下如何处理多个并行的 Http 请求。forkJoin接下来的示例,将使用 forkJoin 操作符。如果熟悉 Promises 的话,该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin 操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的列表。具体示例如下:

除了 mergeMap 外,RxJS 中的 switchMap 有什么用switchMap 操作符用于对源 Observable 对象发出的值,做映射处理。若有新的 Observable 对象出现,会在新的 Observable 对象发出新值后,退订前一个未处理完的 Observable 对象。使用示例:

而在实际使用 Http 服务的场景中,实现 AutoComplete 功能,可以利用 switchMap 操作符,来取消无用的 Http 请求。