时间戳

首页 > 解决方案 > 为什么我们需要 Rxjs 中的 Tap 运算符

typescript - 为什么我们需要 Rxjs 中的 Tap 运算符

问题描述

我是 Rxjs 的新手，我正在观看 David Acosta 与 Rxjs 运算符相关的教程之一。在那，他说当我们不需要接触 observable 的数据时，我们可以使用 tap 操作符。因此，tap 函数中的数据不会被更改。

我写了下面的代码

 const source = Observable.of("david");

    source.pipe(
      tap(x => x.toString().toUpperCase())
    ).subscribe(x => console.log(x));

我得到的输出为david. 但我想知道

source.subscribe(x => console.log(x));

给出相同的输出david。那为什么我们需要 tap 操作符。这对我来说有点神秘，我无法为我找到合适的资源来解释TAP操作员

任何人都可以详细解释一下，并建议我为 Rxjs 操作员提供一些好的教程或文档

标签： typescriptrxjs

解决方案

点击与添加订阅并不完全相同。例如，如果你有一个 HTTP 服务器的客户端，你可能有一些看起来像......

function getItems(): Observable<Item[]> {
  return makeSomeExpensiveHttpCall()
    .map(rsp => doSomeExpensiveParsing(rsp))
    .tap(items => console.log(`Received ${items.length} items`));    
}

...乍一看相当于...

function getItems(): Observable<Item[]> {
  const result = return makeSomeExpensiveHttpCall()
    .map(rsp => doSomeExpensiveParsing(rsp));
  result.subscribe(items => {
    console.log(`Received ${items.length} items`);
  });
  return result;
}

但是，按照目前的编写方式，每次调用subscribe它都会makeSomeExpensiveHttpCall执行doSomeExpensiveParsing. 因此，在第二个示例中，您最终可能会调用这些函数两次而不是一次。您将向服务器发送两个相同的 HTTP 请求。我们绝对希望避免这种情况。

推荐阅读