RxJS调试（二）：摆脱枯燥，让日志记录变得有趣

2023-11-13 06:27:00

日志记录并不是一件让人兴奋的事。然而，这是获得足够的信息来推理问题最直接的方法，而不需要去猜测。在**调试 RxJS（一）：工具** 中，我们了解到，作为调试的另一个选择——rxjs-spy 可以将操作流转换成一种更易于阅读的格式，以便快速识别问题。

什么时候使用日志记录进行调试？

日志记录实际上适用于多种不同的问题：

确认流是否按预期发出值
查看流是否按预期完成
确保操作符应用正确
验证流中的值与预期值是否一致

如果能够做到以下三点，那么你可能更适合使用日志记录而不是rxjs-spy ：

你想看到原始的值，而不是转换后的值。 例如，如果你想看到一个流发出的原始HTTP响应对象，那么日志记录就比rxjs-spy 更有用，后者只能让你看到流中的原始值。
你想要对流进行更多的控制。 例如，你可以使用日志记录来有条件地输出信息，或者只输出特定类型的值。
你想要对流进行更高级别的调试。 例如，你可以使用日志记录来分析流的性能，或者跟踪流在应用程序中的传播情况。

使用日志记录进行调试

为了向你展示如何使用日志记录进行调试，我们将使用RxJS内置的console操作符。这个操作符允许你将流中的值记录到浏览器的控制台。

例如，以下代码将流中的值记录到控制台：

import { interval } from 'rxjs';
import { tap } from 'rxjs/operators';

interval(1000)
  .pipe(
    tap(value => console.log(`Value: ${value}`))
  )
  .subscribe();

这将每隔一秒钟在控制台中输出一个数字。

记录更多信息

在某些情况下，你可能需要记录比值更多信息。例如，你可能需要记录流的名称、操作符的名称，或者错误信息。

要做到这一点，你可以使用console.log()函数的其他参数。例如，以下代码将流的名称、操作符的名称和值记录到控制台：

import { interval } from 'rxjs';
import { tap } from 'rxjs/operators';

interval(1000)
  .pipe(
    tap({
      next: value => console.log(`Value: ${value}`),
      error: err => console.log(`Error: ${err}`),
      complete: () => console.log(`Completed`)
    })
  )
  .subscribe();

这将每隔一秒钟在控制台中输出一个数字，以及一个表示流已完成的消息。

有条件地记录信息

在某些情况下，你可能只想记录某些值。例如，你可能只想记录大于特定值的数字。

要做到这一点，你可以使用filter操作符。例如，以下代码将过滤掉小于10的值，然后将剩余的值记录到控制台：

import { interval } from 'rxjs';
import { filter, tap } from 'rxjs/operators';

interval(1000)
  .pipe(
    filter(value => value >= 10),
    tap(value => console.log(`Value: ${value}`))
  )
  .subscribe();