在前端开发中，我们经常需要处理异步数据流。而 RxJS 是一个强大的响应式编程库，它可以帮助我们更方便地处理异步数据流。在 RxJS 6 中，新增了 tap 和 finalize 这两个操作符，它们可以帮助我们更好地处理数据流。
tap 操作符
tap 操作符可以对数据流进行监视，而不会改变数据流的内容。我们可以使用它来打印日志、调试代码或者执行一些副作用操作。它的语法如下：
tap(nextOrObserver: Observer | function, error: function, complete: function): Observable
其中，nextOrObserver 是一个函数或者一个 Observer 对象，表示对数据流中每个元素的处理。error 和 complete 分别是错误处理函数和完成处理函数，可选。
我们来看一个例子。假设我们有一个 Observable 对象，它的数据流是一个数组：
const source = of([1, 2, 3]);
我们可以使用 tap 操作符来打印数组中的每个元素：
const example = source.pipe(
tap(val => console.log(`tap: ${val}`))
);
example.subscribe(val => console.log(`subscribe: ${val}`));输出结果如下：
tap: 1 subscribe: [1,2,3] tap: 2 subscribe: [1,2,3] tap: 3 subscribe: [1,2,3]
可以看到，tap 操作符打印了每个元素，而 subscribe 函数接收到的是整个数组。
finalize 操作符
finalize 操作符可以在 Observable 完成时执行一些操作，无论是正常完成还是发生错误。它的语法如下：
finalize(callback: function): Observable
其中，callback 是一个函数，表示需要执行的操作。
我们来看一个例子。假设我们有一个 Observable 对象，它的数据流是一个计时器：
const source = interval(1000);
const example = source.pipe(
take(5),
finalize(() => console.log('complete'))
);
example.subscribe(val => console.log(val));这个 Observable 对象会在 5 秒钟后自动完成，并输出 complete 字符串：
0 1 2 3 4 complete
tap 和 finalize 的组合使用
在实际开发中，我们经常需要在数据流中添加一些副作用操作，比如打印日志、记录日志、关闭资源等。在这种情况下，我们可以使用 tap 和 finalize 操作符来实现这些操作。
假设我们有一个 Observable 对象，它的数据流是一个 HTTP 请求结果：
const source = ajax('https://jsonplaceholder.typicode.com/todos/1');我们可以使用 tap 操作符来打印请求结果：
const example = source.pipe( tap(res => console.log(res)) );
我们也可以使用 finalize 操作符来关闭 HTTP 连接：
const example = source.pipe(
tap(res => console.log(res)),
finalize(() => console.log('HTTP connection closed'))
);总结
RxJS 6 中的 tap 和 finalize 操作符可以帮助我们更好地处理数据流。tap 操作符可以对数据流进行监视，而 finalize 操作符可以在 Observable 完成时执行一些操作。它们的组合使用可以方便地实现一些副作用操作。在实际开发中，我们可以根据需要使用它们来处理异步数据流。
示例代码：
// javascriptcn.com 代码示例
import { of, interval } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { tap, finalize, take } from 'rxjs/operators';
const source1 = of([1, 2, 3]);
const example1 = source1.pipe(
tap(val => console.log(`tap: ${val}`))
);
example1.subscribe(val => console.log(`subscribe: ${val}`));
const source2 = interval(1000);
const example2 = source2.pipe(
take(5),
finalize(() => console.log('complete'))
);
example2.subscribe(val => console.log(val));
const source3 = ajax('https://jsonplaceholder.typicode.com/todos/1');
const example3 = source3.pipe(
tap(res => console.log(res)),
finalize(() => console.log('HTTP connection closed'))
);
example3.subscribe();来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65556d26d2f5e1655df917f3