RxJS 中的 takeLast 操作符：什么是它以及如何使用它

当我们需要在一个流中获取最后几个值时，RxJS 中的 takeLast 操作符可以很好地帮助我们实现这个功能。本文将介绍什么是 takeLast 操作符以及如何使用它，同时提供示例代码和实际应用场景。

什么是 takeLast 操作符

takeLast 是 RxJS 中的一个操作符，用于从 Observable 流的末尾获取指定数量的值。

takeLast 操作符会将 Observable 流中的所有值缓存起来，直到流结束。当流结束时，takeLast 操作符会发出 Observable 流的末尾（后面）指定数量的值。

如何使用 takeLast 操作符

使用 RxJS 中的 takeLast 操作符非常简单。只需要在 Observable 流中使用 takeLast 操作符，并指定需要获取的值的数量即可。示例代码如下：

import { from } from 'rxjs';
import { takeLast } from 'rxjs/operators';

const obs$ = from([1, 2, 3, 4, 5]);
obs$.pipe(takeLast(3)).subscribe(val => console.log(val));
// 输出：3，4，5

在上面的示例代码中，我们首先创建了一个包含 1~5 的 Observable 流。我们通过调用 takeLast 操作符并传递参数 3，告诉 RxJS 我们需要获取 Observable 流的后 3 个值。最后我们通过订阅操作符订阅这个新的 Observable 流，并在其中输出获取到的值。

除了指定需要获取的数量之外，我们还可以传递一个可选参数，用于设置一个时间窗口。这个时间窗口指定了在 Observable 流结束之前，takeLast 操作符最长等待的时间。示例代码如下：

import { of } from 'rxjs';
import { takeLast } from 'rxjs/operators';

const obs$ = of(1, 2, 3, 4, 5);
obs$.pipe(takeLast(3, 2000)).subscribe(val => console.log(val));
// 输出：3，4，5

在上面的示例代码中，我们传递了一个名为 duration 的参数，用于设置时间窗口为 2000ms。这意味着如果 Observable 流没有在 2000ms 内结束，takeLast 操作符将不再等待，并且只能发出当前缓存的值。

实际应用场景

takeLast 操作符的常见用途之一是在从服务端获取大量数据时，对数据进行分页。例如，我们希望每次只获取最后 n 个数据，以便在客户端上进行分页。

import { fromEvent } from 'rxjs';
import { concatMap, takeLast } from 'rxjs/operators';
import { getChunkData } from 'services/data.js';

const loadBtn = document.getElementById('load-more');

function loadChunk(offset, limit) {
  return from(getChunkData({ offset, limit }));
}

fromEvent(loadBtn, 'click')
  .pipe(
    concatMap(() => loadChunk(0, 10)),
    takeLast(10)
  )
  .subscribe(data => {
    console.log('data:', data);
    // TODO: render data
  });

在上面的示例代码中，我们首先使用 RxJS 的 fromEvent 方法从 ‘load-more’ 按钮上订阅了一个点击事件。在点击事件的回调函数中，我们调用了 loadChunk 方法，该方法从服务器获取数据并返回一个 Observable 流。

我们使用了 concatMap 操作符来将 loadChunk 方法的返回值连接到当前的 Observable 流中，并且通过传递 0 和 10 作为 offset 和 limit 参数，告诉服务器我们只需要获取最新的 10 个数据。

最后，我们通过调用 takeLast 操作符并传递参数 10，获取 loadChunk 方法返回的 Observable 流中的最后 10 个数据。我们可以将这些数据用于客户端分页的展示。

总结

在本文中，我们介绍了 RxJS 中的 takeLast 操作符以及如何使用它。我们还提供了实际应用场景和示例代码来帮助读者更好地理解和应用这个操作符。当我们需要从一个包含大量数据的 Observable 流中获取最后 n 个值时，takeLast 操作符是一个非常有用的工具。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a87152add4f0e0ff192242