Angular + RxJS：迭代 Observable-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一款强大的前端框架，而 RxJS 则是一种强大的响应式编程语言，能够使我们编写出高效、易于维护和封装的代码。在 Angular 中使用 RxJS，能够让我们更加优雅和完美地解决一些常见的问题，如异步数据处理和状态管理等等。本文将探讨如何使用 Angular 和 RxJS 创建和迭代 Observable。

什么是 Observable

Observable 是一个可观察的对象，它可以发送任何类型的消息给一组观察者。通过使用 Observable，我们可以轻松处理一些异步操作，例如 HTTP 请求或用户输入等等。其本质是一个提供了订阅机制以及像 map, filter, flatMap 等函数式操作符的序列。

Angular 在使用 HTTP 服务库时就提供了 Observable 返回类型，我们可以使用它来订阅 HTTP 响应并模拟一个持久化存储。

创建 Observable

在 Angular 中使用 RxJS 可以很容易地创建 Observable。通常我们使用 of(...) 或 from(...) 函数来创建一个 Observable。

import { of, from } from 'rxjs';

const myObservable = of('a', 'b', 'c');
const myObservable2 = from([1, 2, 3]);

其中，of(...) 函数创建一个 Observable，该 Observable 依次发出传递给它的参数。而 from(...) 函数则将数组转换为一个可被订阅的 Observable。我们也可以通过创建一个新的 Observable 对象来实现更复杂的操作。

import { Observable } from 'rxjs';

const myCustomObservable = new Observable((observer) => {
  observer.next('hello');
  observer.next('world');
  observer.complete();
});

上面的 myCustomObservable 会依次发出 hello 和 world 消息，并且仅仅在 observer 进行 complete() 操作之后才能触发其他的事件，例如 error() 方法。

订阅 Observable

我们已经知道了如何创建 Observable，现在该如何订阅呢？

myObservable.subscribe({
  next: (value) => console.log(`I\'m receiving ${value}!`),
  error: (err) => console.log(`I'm receiving an error: ${err}`),
  complete: () => console.log(`I'm done!`),
});

上面的代码中，我们使用 subscribe 函数来订阅 myObservable，而 next, error 和 complete 是我们在订阅过程中能够接收到的回调函数。

如果不需要接收到订阅过程中发生的错误，及完成标志的话，我们可以直接使用传入 subscribe() 的处理函数。

myObservable.subscribe((value) => console.log(`I'm receiving ${value}!`));

转化 Observable

我们可以使用一系列的操作符来变换 Observable 中的值，这些操作符可以帮助我们将一个序列的事件转换为另一个事件序列，且流式处理过程可以被构建成复杂操作链。

例如，我们可以使用 map(...) 操作符来将一个 Observable 发出的值转化为另一个值。

import { map } from 'rxjs/operators';

myObservable
  .pipe(map((value) => value.toUpperCase()))
  .subscribe((value) => console.log(`I'm receiving ${value}!`));

在这段代码中，我们使用 map(...) 操作符将 myObservable 的值转化为大写字母形式。由于 map() 操作符返回一个新的 Observable，我们依然需要在最后使用 subscribe(...) 来打印结果。

我们还可以将两个 Observable 进行合并，形成一种新的 Observable。

import { zip } from 'rxjs';

zip(obs1, obs2).subscribe(console.log);

zip(...) 操作符将两个 Observable 重组并返回一个新的 Observable，其中，新的 Observable 发出具有相同索引的值的元素对，直至任一输入 Observable 完成。

完成 Observable

当 Observable 完成后，需要调用 complete() 方法将它清理掉。

completionObservable.subscribe(() => {
  console.log('I have completed!');
  completionObservable.complete();
});

注意，调用 complete() 方法不能使正在执行的 Subscription 发生错误。

取消订阅 Observable

在 Observable 发出所有元素后，我们可以在 Subscription 实例中调用 unsubscribe() 方法来取消订阅，这样就不再接收到 Observable 产生的事件。

const subscription = exampleObservable.subscribe(
  (value) => console.log(value),
  (error) => console.log(error),
  () => console.log('Completed!')
);

subscription.unsubscribe();

总结

在本文中，我们详细介绍了如何在 Angular 中使用 RxJS 创建和迭代 Observable，以及如何使用一系列的操作符进行数据变换。如果您想更深入学习 RxJS，建议阅读官方文档以及相关书籍。

参考资料

RxJS 官网
Angular 官网
Andre Stromberg, RxJS In Action, Manning Publications, 2016.

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