时间戳

首页 > 解决方案 > 根据先前发出的值阻止执行

rxjs - 根据先前发出的值阻止执行

问题描述

如果我的 typeahead 得到一个空的搜索结果，那么应该阻止任何后续的带有 norrowed 搜索查询的查询。例如，如果搜索“ red ”返回空，搜索“ redcar ”就没有任何意义。

我尝试使用 pairwise() 和 scan() 运算符。代码片段：

import { tap, switchMap, filter, pairwise, scan, map } from 'rxjs/operators';

this.searchForm.get('search').valueChanges
  .pipe(
    switchMap( queryString => this.backend.search(queryString))
  )
  .subscribe()

更新给定一个简化的场景：后端 只有术语“苹果” 。用户正在输入搜索字符串（请求未被 switchMap() 中止）：

  1. 'a' --------> 后端调用返回 'apple'
  2. 'ap' ------> 后端调用返回 'apple'
  3. 'app' -----> 后端调用返回 'apple'
  4. 'appl' ----> 后端调用返回 'apple'
  5. 'apple' ---> 后端调用返回 'apple'
  6. 'apple p' -----> 后端调用返回 EMPTY
  7. 'apple pi' ----> 后端调用返回 EMPTY
  8. 'apple pie' ---> 后端调用返回 EMPTY

后端调用 7. 和 8. 是不必要的，因为 6. 已经返回 EMPTY。因此，可以省略任何后续调用。在我看来，需要一些记忆。

我想防止不必要的后端调用（http）。有没有办法在 rxjs 中实现这一点？

标签： rxjs

解决方案

您可以使用过滤器运算符：

this.searchForm.get('search').valueChanges.pipe(
  filter(query => query)
  switchMap(query => this.backend.search(queryString))
)

你可以在这里尝试这个机制：RxJS-Editor

代码共享不起作用，因此您可以在此处获取代码：

const { of } = Rx;
const { filter } = RxOperators;

of('foo1', 'foo2', undefined, undefined, 'foo3').pipe(
  filter(value => value)  
)

推荐阅读