使用RxJS处理多个Http请求的Angular.js 4

进入某个页面时，需要从多个API地址获取数据然后进行显示。管理多个异步数据请求会比较困难，可以借助Angular Http服务和RxJS库提供的功能来实现上述的功能。

处理多个请求的方式

有多种处理多个请求的方式，可以使用串行或并行的方式。其中，mergeMap操作符用于从内部的Observable对象中获取值，然后返回给父级流对象。通过合并Observable对象，可以在源Observable对象发出值时，合并输出的值。

使用mergeMap操作符合并Observable对象

在上面示例中，mergeMap操作符被用来合并两种Observable类型：源Observable对象和内部Observable对象。只有当内部的Observable对象发出值后，才会合并源Observable对象输出的值，并最终输出合并的值。

使用forkJoin合并多个Observable对象

forkJoin是Rx版本的()，即表示等到所有的Observable都完成后，才一次性返回值。通过使用forkJoin操作符，可以合并多个Observable对象。

使用Angular Http服务处理Http请求

为了处理Http请求，可以使用Angular Http服务。通过依赖注入方式注入http服务，然后在ngOnInit方法中调用http对象的get方法来获取数据。

使用mergeMap优化处理多个Http请求的流程

在上面示例中，通过mergeMap操作符，解决了嵌套订阅的问题。可以通过RxJS库中提供的mergeMap操作符来优化处理多个Http请求的流程。

使用forkJoin处理多个并行的Http请求

除了mergeMap外，还可以使用forkJoin操作符来处理多个并行的Http请求。forkJoin操作符接收一个Observable对象列表，然后并行地执行它们。一旦列表的Observable对象都发出值后，forkJoin操作符返回的Observable对象会发出新的值，即包含所有Observable对象输出值的列表。

使用switchMap操作符取消无用的Http请求

除了mergeMap外，RxJS中的switchMap操作符也很有用。switchMap操作符用于对源Observable对象发出的值做映射处理。当有新的Observable对象出现时，会在新的Observable对象发出新值后，退订前一个未处理完的Observable对象。在实际使用Http服务的场景中，可以利用switchMap操作符来取消无用的Http请求，例如实现AutoComplete功能。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。