运算符实际上tap做什么？当你对一个值执行它时会发生什么(应该发生(？它应该只执行一些代码吗？如果它应该只执行一些代码，那么它只是该代码的包装器吗？
例如，它在下面做吗？
clickStream$.pipe(
tap((event) => {
event.stopPropagation();
event.preventDefault();
}),
debounce(300),
map((event) => event.key)
).subscribe((key) => console.log('key debounced: ', key))
或在此示例中
export class LoggingInterceptorService implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler) {
console.log('Outgoing request:');
console.log(req.url);
return next.handle(req).pipe(tap(event => {
if (event.type === HttpEventType.Response) {
console.log('Incoming response: ');
console.log(event.body);
}
}));
}
}
通过将 Rxjs 运算符管道在一起，我们从一个可观察量开始，以另一个可观察量结束。
const userBooks$ = getUser(emailAddress).pipe(
switchMap(user => getBooksForUser(user.id));
- 我们从一个返回
Observable<User>的方法开始 - 我们将其传送到
switchMap并调用另一个返回和Observable<Book[]>的方法
这就是 Rxjs 的功能反应性。通过管道将运算符组合在一起以转换流。
您可以将这些视为列表理解方法，例如映射，减少，过滤，合并...但对于异步流 - 而不是数组或列表。
因此，如果我们能做的只是通过管道向操作员发送Observalbe<T1>并Observable<T2>- 我们如何做其他事情，例如调用控制台.log(..( - 或者向用户显示错误？或者我们需要做的任何事情都会与 Rxjs 运算符链之外的世界进行交互。任何触及状态的东西，调用的东西，在运算符之外都是副作用。
const userBooks$ = getUser(emailAddress).pipe(
tap(user => console.log('user id: ', user.id),
switchMap(user => getBooksForUser(user.id).pipe(
tap(books => console.log('books: ', JSON.stringify(books)));
tap(..)不会改变流的转换——它是完全非破坏性的。因此，它通常用于调试，因为它们可以安全地添加和删除，而不会影响运算符链。
这是关于将副作用与纯(更准确地说是数学(计算分开。受函数式编程的启发，副作用要么根本不可能(因此这种语言对于许多现实世界的场景是完全无用的：例如，您永远无法查询数据库或向控制台写入某些内容(，要么只允许在某些显式条件下(如 Haskell 中著名的IOmonad(，rxjs 尽最大努力遵循这种思维方式。不幸的是，它仍然缺乏剃刀形状的分隔线：与上面提到的Haskell相反，人们可能会在tap之外引入副作用：比如说，一个代码类似于myObservable.pipe(map(x => { console.log(x); return x * x; });(你永远不能绕过IO类型将此代码转换为Haskell( - 有副作用无情地与纯计算混合在一起。JavaScript 是一种编程语言，根本不强制要求纯度;然而，RXJS 试图提供一组有用的原语，允许您在纯代码之外引入副作用：myObservable.pipe(tap(console.log), map(x => x * x))。现在，该地图是纯净的，具有纯度的所有好处，tap是一个定义明确的受控杂质区域。纯粹确实不是框架的中心思想，但可以说是其中之一。
附言在这一点上，你可能会认为"数学计算"是你在学校学到的东西：乘以一些整数或任何代数;这不太正确。不要犹豫，花一些时间学习纯函数和非纯函数之间的区别及其应用和后果，以充分了解问题。
tap运算符用于引入副作用。
您可以将副作用视为发生在主要操作方面的事情。
在您的示例中，clickStream$的观察者只对在发生点击事件时接收通知感兴趣。tap运算符内部发生的事情是一种副作用，因为除了发出单击事件外，您还有其他操作，例如event.stopPropagation()和event.preventDefault().
另一个副作用可能是日志记录。另一个方法是在用户提交表单时向服务器发送请求。