Rxjs:如何观察对上次发出的Ajax请求的HTTP响应

时间:2017-01-03 02:49:18

标签: ajax rxjs

我有一个"快速搜索的用例'用户键入搜索条件的前几个字母的框,系统实时显示结果列表。例如。如果你输入" J"在国家名称的框中,它将显示"牙买加,日本,约旦"。当你继续输入" Ja"时,它只显示牙买加和日本,并让乔丹出局。

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

  1. 请求" J"。
  2. 的搜索结果
  3. 请求" Ja"。
  4. 的搜索结果
  5. 收到对请求#2的回复:[牙买加,日本]
  6. 收到对请求#1的回应:[牙买加,日本,约旦]
  7. 如果系统盲目地显示最后一个响应,当搜索框包含" Ja",但" Jordan"时,它将最终处于不一致状态。在建议清单上。系统应该是智能的并且丢弃响应#4,因为它不再相关。

    RxJS是否提供了一种干净的方式来放弃对上次发出的请求之外的任何回复?

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

1 个答案:

答案 0 :(得分:4)

&安培; tldr;

您希望switchMap代替flatMapmergeMap

击穿

我只是快速谷歌搜索" rxjs智能搜索"并发现前两个点击中有两个点击了问题herehere

但是对于未来的读者来说,答案是使用switchMapflatMapLatest,就像以前一样。顾名思义,它都会切换地图。这意味着什么,完全来自文档here

  

将每个源值投影到一个Observable,该Observable在输出Observable中合并,仅从最近投影的Observable中发出值。

简单来说,像flatMap一样,每个传递给switchMap的回调函数的单个事件都应该产生一个流(或类似流的东西)。新发布的结果是只有最新流的结果才会被收听,同时有最好的努力"取消原件。每次新发射都会发生这种情况。通过尽力而为,这意味着如果有办法停止陈旧流的进度,它将被暂停,但对于某些数据结构(读:Promises),一旦进行中就无法实际取消它所以图书馆可以做的最好就是忽略结果。