RxJS 基础操作符讲解：用 combineLatest 实现异步加载多个数据

RxJS 是一个流式编程库，它提供了丰富的操作符，使得我们能够更加简单和方便地处理异步数据流。在 RxJS 中，combineLatest 是一个非常实用的操作符，它可以让我们实现异步加载多个数据。

combineLatest 操作符

combineLatest 操作符用于将多个 Observables 中最新的值组合成一个数组，并发出这个数组。当任何一个 Observable 发出新值时，它都会重新计算组合值并发出新的数组。它的语法如下：

combineLatest(...observables: Array<Observable>): Observable

其中，observables 是一个 Observable 数组，表示要组合的多个 Observables。

实现异步加载多个数据

假设我们需要从服务器上加载多个数据，它们的加载时间可能不同，但最终我们需要将它们合并成一个数据。这时，我们就可以使用 combineLatest 操作符。

// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';

const data1$ = fetchData1();
const data2$ = fetchData2();
const data3$ = fetchData3();

combineLatest(data1$, data2$, data3$).subscribe(([data1, data2, data3]) => {
  // 处理合并后的数据
});

在上面的代码中，我们使用了 fetchData1、fetchData2 和 fetchData3 三个函数，它们分别返回了三个 Observables，表示要加载的三个数据。我们将这三个 Observables 传给 combineLatest 操作符，它会自动将最新的值组合成一个数组，并发出这个数组。最后，我们通过 subscribe 方法来订阅这个 Observable，获取合并后的数据。

示例代码

下面是一个完整的示例代码，演示如何使用 combineLatest 操作符实现异步加载多个数据：

// www.javascriptcn.com code example
import { combineLatest } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';

const url1 = 'https://jsonplaceholder.typicode.com/todos/1';
const url2 = 'https://jsonplaceholder.typicode.com/todos/2';
const url3 = 'https://jsonplaceholder.typicode.com/todos/3';

const data1$ = fromFetch(url1).pipe(
  catchError((error) => {
    console.error(error);
    return [];
  }),
  map((response) => response.json())
);

const data2$ = fromFetch(url2).pipe(
  catchError((error) => {
    console.error(error);
    return [];
  }),
  map((response) => response.json())
);

const data3$ = fromFetch(url3).pipe(
  catchError((error) => {
    console.error(error);
    return [];
  }),
  map((response) => response.json())
);

combineLatest(data1$, data2$, data3$).subscribe(([data1, data2, data3]) => {
  console.log('data1:', data1);
  console.log('data2:', data2);
  console.log('data3:', data3);
});

在上面的代码中，我们使用了 RxJS 的 fromFetch 操作符来从服务器上获取数据。我们定义了三个 url，分别表示要加载的三个数据。然后，我们使用 fromFetch 操作符将这三个 url 转换成对应的 Observables。在转换过程中，我们还使用了 catchError 操作符来捕获错误，并返回一个空数组。最后，我们将这三个 Observables 传给 combineLatest 操作符，它会自动将最新的值组合成一个数组，并发出这个数组。最后，我们通过 subscribe 方法来订阅这个 Observable，获取合并后的数据，并打印到控制台上。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d40a27a941bf71347a6996