首页 > 软件开发 > JavaScript >

angular.js4使用 RxJS 处理多个 Http 请求

来源:互联网 2023-03-16 23:57:33 版权归原作者所有,如有侵权,请联系我们

进入某个页面时,需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难,可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。xTE办公区 - 实用经验教程分享!

工具/原料

  • JavaScript

方法/步骤

  • 1

    mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。xTE办公区 - 实用经验教程分享!

    合并 Observable 对象xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 1相关内容未经许可获取自百度经验
  • 2

    在上面示例中包含两种 Observable 类型:xTE办公区 - 实用经验教程分享!

    源 Observable 对象 - 即 source 对象xTE办公区 - 实用经验教程分享!

    内部 Observable 对象 - 即 Rx.Observable.of(`${val} World!`) 对象xTE办公区 - 实用经验教程分享!

    仅当内部的 Observable 对象发出值后,才会合并源 Observable 对象输出的值,并最终输出合并的值。xTE办公区 - 实用经验教程分享!

    forkJoinxTE办公区 - 实用经验教程分享!

    forkJoin 是 Rx 版本的 Promise.all(),即表示等到所有的 Observable 都完成后,才一次性返回值。xTE办公区 - 实用经验教程分享!

    合并多个 Observable 对象xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 3

    处理 Http 请求xTE办公区 - 实用经验教程分享!

    看一下 Angular Http 服务简单示例。xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 4

    通过依赖注入方式注入 http 服务,然后在 ngOnInit() 方法中调用 http 对象的 get() 方法来获取数据。看一下如何处理两个请求。xTE办公区 - 实用经验教程分享!

    Map 和 SubscribexTE办公区 - 实用经验教程分享!

    发送下一个请求时,需要依赖于上一个请求的数据。在需要在上一个请求的回调函数中获取相应数据,然后在发起另一个 HTTP 请求。xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 5

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

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 6

    在上面示例中,通过 mergeMap 操作符,解决了嵌套订阅的问题。最后来看一下如何处理多个并行的 Http 请求。xTE办公区 - 实用经验教程分享!

    forkJoinxTE办公区 - 实用经验教程分享!

    接下来的示例,将使用 forkJoin 操作符。如果熟悉 Promises 的话,该操作符与 Promise.all() 实现的功能类似。forkJoin 操作符接收一个 Observable 对象列表,然后并行地执行它们。一旦列表的 Observable 对象都发出值后,forkJoin 操作符返回的 Observable 对象会发出新的值,即包含所有 Observable 对象输出值的列表。具体示例如下:xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 7

    除了 mergeMap 外,RxJS 中的 switchMap 有什么用xTE办公区 - 实用经验教程分享!

    switchMap 操作符用于对源 Observable 对象发出的值,做映射处理。若有新的 Observable 对象出现,会在新的 Observable 对象发出新值后,退订前一个未处理完的 Observable 对象。xTE办公区 - 实用经验教程分享!

    使用示例:xTE办公区 - 实用经验教程分享!

    angular.js4使用 RxJS 处理多个 Http 请求xTE办公区 - 实用经验教程分享!

  • 8

    而在实际使用 Http 服务的场景中,实现 AutoComplete 功能,可以利用 switchMap 操作符,来取消无用的 Http 请求。xTE办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!xTE办公区 - 实用经验教程分享!


    标签: 编程语言JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号