javascript - 如何让 RxJS 在下一个反跳结束之前取消已反跳的 http 调用？

Question

我有一个通过 REST API 更新模型的输入字段。

1. 用户写“e”
2. 用户等待 400 毫秒(去抖时间)
3. 用于更新后端模型的 http 调用会触发
4. 用户快速写下“eeeeeee”
5. http 调用返回更新后的模型，这会覆盖前端中的当前模型
6. 文本输入变回“e”，用户无需执行任何操作

我现在的代码如下所示(RxJS 5.0.0-beta.6):

this.textInput
    .valueChanges
    .map(change => this.item.text = change)
    .debounceTime(400)
    .switchMap(
        change => this.itemService.save(item)
    )
    .subscribe(updatedItem => this.item = updatedItem)

我想要发生的是，如果用户写入更多文本，它应该取消之前的 http 调用，即使我们仍在等待去抖完成。

PS: flatMapLates() was renamed to switchMap() in RxJS 5

Answer 1

您可以使用flatMapLatest运算符(operator)。它类似于 flatMap 但当新值到达时将从流中取消订阅。

另请记住，this.itemService.save(item) 应该返回一次性的，这将取消处置时的 XHR 请求。

在这里我创建了 jsbin for you展示它是如何工作的(在输入时打开网络选项卡，您将看到已取消的请求)