rxjs经典场景之http请求
admin
2023-07-25 19:00:21
0

在实际开发中,相信小伙伴们都碰到过接口的串行调用以及并行调用,而并行调用又有两种,一种是只需最先返回的结果即可,这种比较少见,有时候接口变迁,为了平缓过渡,方便容错才会出现;另一种则是需要所有请求的接口数据才能进行下一步,这种比较常见,如账号可用余额是否可以购买商品等。

普通的Ajax请求

在前端远古时代,碰到以上情况,串行通过嵌套调用来处理,并行通过判断是否均完成请求的方式来处理。
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
但是这样子处理实际上并不能说符合预期。首先,嵌套调用的方式,如果里面再涉及到其他回调的话,满满的回调地狱即视感。其次,判断请求状态的方式,每个接口的回调都要做判断,并行的接口越多,判断的条件越多,代码冗余的越厉害。

Promise异步处理

为了解决回调地狱的问题,ES6将Promise写进了语言标准并统一了用法。Promise的链式调用、race、all方法可以大大改善嵌套调用以及并行调用的问题,并得以解决。
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
但是Promise本身是无法取消的,在用于http请求时,会引发两个无法忽视的问题:

●在单页面应用中,resolve回调里需要进行try/catch处理,特别是在回调里有DOM操作的时候。否则,在接口响应慢的时候进行路由切换会导致控制台报错,甚至导致页面陷入无法交互的境地。

●由于接口响应慢而导致的竞态条件问题。

而相比之下,rxjs能解决以上所有问题。

rxjs数据流

rxjs可以说是一套针对数据流的函数响应式编程,有着极其强大而丰富的操作符,可以将所有数据抽象成数据流的形式,使开发者能以同步编程的方式来进行处理。

首先,在串、并行调用接口时,先利用操作符将数据来源进行处理,然后订阅即可。
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
rxjs经典场景之http请求
其次,rxjs是可以取消的,对于Promise出现的两个问题:

●在切换路由,组件销毁时调用unsubscribe方法取消订阅,回调里的逻辑便不会执行。

●竞态条件是由于接口异步调用的回调顺序不可控导致的,rxjs的switchMap操作符可以确保每次接收到的都是最新一次发送的值(即最新的接口回调的值)。
睿江云计算官网:http://www.eflycloud.com/home?from=RJ_0027
rxjs经典场景之http请求

相关内容

热门资讯

寻找照片中的TA丨“天路”照片... 2006年7月1日举世瞩目的青藏铁路全线通车千年雪域高原彻底告别闭塞正式通车前几日在拉萨市当雄县公塘...
31省都在抢的几大赛道,藏着未... 最近证券时报发了篇报道,宣布了一个重磅消息:31个省份“十五五”规划已经全部出齐了。我翻完了发现一件...
西班牙港口高管敦促欧盟推迟对俄... 【文/观察者网 熊超然】自俄乌冲突爆发以来,欧洲在能源领域的脆弱性不断凸显。日前,欧洲一家主要天然气...
斯洛伐克总理:不会参与北约70... 据《基辅独立报》报道,斯洛伐克总理菲佐当地时间6月27日表示,反对在即将举行的北约峰会上向乌克兰提供...
为什么洗衣机等大家电都不带程序... 最佳回答 由于技术的限制现在市面上的洗衣机很少带有记忆功能的。不过还是有少部分的洗衣机是带有记忆功能...
双动力洗衣机如何选择? 最佳回答 双动力洗衣机现在在市面上还是比较受欢迎的,现在在市面上的双动力洗衣机,品牌也是比较多的,我...
怎么把我的电脑放到桌面上 最佳回答既然您是想要把我的电脑放到自己电脑的桌面位置上,那大概可以想象得到,您用的是windows1...
为什么混水阀下的水嘴不能接延长... 混水阀下的水嘴可以接延长管,但需要注意以下几点:1. 水压问题:延长管可能会增加水流的阻力,导致水压...
格力不能启动面板两个灯闪 原因可能是显示屏故障,可以通过更换显示屏的方法解决;原因可能是主控板显示屏的电路部分有损坏故障,可以...
特朗普力推修改中期选举规则,美... 据美国《华盛顿邮报》报道,距离美国中期选举仅剩4个月之际,美国总统特朗普推动修改美国选举规则的努力正...