记录一次使用RxJs的操作符优化消息搜索功能

前言

之前在开发消息搜索模块时，遇到个问题：如果在防抖允许的时间内，连续两次输入不同的关键词触发http请求，如果网络速度慢，或者接口调用时间长的话，就会导致两个http连接同时在请求，这样就会导致页面会显示两遍不同的请求结果，甚至如果说第一次的请求响应时间快于第二次的话，会造成当搜索的结果显示不正确的现象。当时并没有想到好的解决思路，然后就搁置了，直到最近看到一篇文章，正好解决了我的需求，然后就来优化记录一下。

优化

先看一下之前的代码：

其中主要的问题就是订阅层层嵌套，看起来非常乱，也没有一些搜索的优化。

利用rxjs操作符优化后的代码：

可以明显的看出来代码变得简洁了许多。

主要的操作符如下：

• forkJoin

• fromEvent

• map

• filter

• debounceTime

• distinctUntilChanged

• switchMap

• takeUntil

分析：

首先使用 forkJoin 来聚合三个 Observable，避免了订阅的层层嵌套，使用 fromEvent 操作符替代 input 的 keyup 事件，map 操作符处理流发出输入的值，filter 过滤掉空字符串，不会发送请求，debounceTime 进行防抖处理，用户可以键入一个值，按退格键并再次键入，这可能会导致重复的搜索值。 我们可以通过添加 distinctUntilChanged 操作符来防止重复搜索的发生。switchMap 操作符的作用是如果连续发送了两次请求，且都没有请求完成，则可以取消之前的搜索。最后使用 takeUnit 操作符来管理取消订阅。

总结

RxJs 操作符的合理运用可以优化代码逻辑，但是 RxJs 操作符种类多，而且学起来多少的是有点抽象的，只有在实际的开发中去应用它，才更能体会到它的强大之处～ Keep Learning～