ajax - Rxjs:如何观察对最后发出的 Ajax 请求的 HTTP 响应

Question

我有一个“快速搜索”框的用例，用户输入搜索条件的前几个字母，系统会实时显示结果列表。例如，如果您在框中输入“J”国家名称，它将显示“牙买加、日本、约旦”。当您继续键入“Ja”时，它将仅显示牙买加和日本，而将约旦排除在外。

每个搜索请求都是一个 AJAX 调用。 AJAX 调用的问题是响应可能与请求的顺序不同。例如，可能发生以下事件序列:

1. 请求“J”的搜索结果。
2. 请求“Ja”的搜索结果。
3. 收到对请求 #2 的回复:[牙买加、日本]
4. 接收对请求 #1 的响应:[牙买加、日本、约旦]

如果系统盲目地显示最后的回复，当搜索框包含“Ja”但“Jordan”在建议列表中时，它会以不一致的状态结束。系统应该很聪明并丢弃响应 #4，因为它不再相关。

RxJS 是否提供了一种干净的方法来丢弃对除最后发出的请求之外的任何响应？

请记住，随着新请求的产生，“最后一个请求”会随着时间的推移而变化。我搜索了文档并没有找到太多。大多数教程都忽略了这个问题。

Answer 1

&tldr;

你想要 switchMap 而不是 flatMap 或 mergeMap

分割

我刚刚在谷歌上快速搜索“rxjs smart search”，发现前两个点击中的两个解决了这个问题，here和 here .

但对于 future 的读者来说，答案是使用 switchMap 或 flatMapLatest，因为它曾经被称为。顾名思义，它同时切换 和 映射。这是什么意思，来自文档 here它，

Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

简单来说，就像 flatMap 一样，每个传入 switchMap 回调函数的事件都应该产生一个流(或类似流的东西)。新发射的结果是仅收听来自最新流的结果，而对原始流进行了“最大努力”取消。每次新发射都会发生这种情况。尽最大努力意味着，如果有办法停止陈旧流上的进度，它将被停止，但对于某些数据结构(阅读:Promises)，一旦它发生，就没有办法真正取消它正在进行中，所以图书馆最多只能忽略结果。