如何使用可观察对象异步 - TypeScript

在 TypeScript 中，你可以使用 Observable 和 RxJS 库来处理异步数据流。 Observable 是一个设计模式，用于处理异步事件序列，它可以用于处理从 HTTP 请求到用户交互等各种异步操作。 RxJS 是一个专用于Observable的库，它提供了很多操作符和工具，帮助你更加轻松地处理 Observable。

准备工作

在开始使用 Observable 之前，需要先安装它:

npm install rxjs

然后，在你的 TypeScript 文件中引入 Observable 和其他需要使用的操作符。

import { Observable } from 'rxjs';
import { map, filter, catchError } from 'rxjs/operators';

使用 Observable

在处理异步数据时，通常将异步操作封装到一个函数中，返回一个 Observable。

function fetchData(): Observable<any> {
  return Observable.create(observer => {
    fetch('/api/data').then(response => {
      observer.next(response.json());
      observer.complete();
    }).catch(error => {
      observer.error(error);
    });
  });
}

在这个函数中，我们使用 fetch 函数向服务器发送一个请求，并将它的结果作为 Observable 的 next 值推送到观察者中。如果请求成功并且数据推送完毕，将 Observable 的 complete 状态设置为 true。否则，将 Observable 的错误状态设置为 true。

现在，就可以通过 subscribe 订阅该 Observable，并处理它的推送值。

fetchData().subscribe(response => {
  console.log(response);
});

操作符

除了将数据推送到观察者外，还可以在 Observable 上应用一系列操作符来转换和过滤推送值。

Map

Map 操作符接收一个函数，该函数将推送的值转换为其他值。例如，在下面的例子中，我们将从服务器返回的数据转换为仅包含用户名的对象。

fetchData().pipe(
  map(data => {
    return data.map(item => item.username);
  })
).subscribe(result => {
  console.log(result);
});

Filter

Filter 操作符接收一个函数，该函数将过滤不需要的数据并返回需要的数据。例如，在下面的例子中，我们将过滤年龄小于 30 岁的用户。

fetchData().pipe(
  filter(data => {
    return data.age > 30;
  })
).subscribe(result => {
  console.log(result);
});

CatchError

CatchError 操作符接收一个函数，该函数将捕获 Observable 中的错误并返回一个新的 Observable。例如，在下面的例子中，我们将处理从服务器获取数据时发生的错误。

fetchData().pipe(
  catchError(error => {
    console.log(error);
    return Observable.of([]);
  })
).subscribe(result => {
  console.log(result);
});

在这种情况下，当 Observable 发生错误时，我们将忽略错误并返回一个空的 Observable。

总结

Observable 和 RxJS 是处理异步数据序列的好工具。你可以使用它们来封装异步操作并将结果推送到观察者中，进行一系列操作以转换或过滤数据，或者处理可能发生的错误。虽然这里只讲解了一些基本的操作符，但 RxJS 中提供了很多其他有用的操作符，你可以根据自己的需求来选择它们。