Angular课程中的响应式编程：Observables与RxJS详解

最新推荐文章于 2025-06-14 09:00:07 发布

尤辰城Agatha

最新推荐文章于 2025-06-14 09:00:07 发布

阅读量388

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00254/article/details/148647465

Angular课程中的响应式编程：Observables与RxJS详解

angular-course Official repository for the Angular: From Theory To Practice Book 项目地址: https://gitcode.com/gh_mirrors/ang/angular-course

什么是Observables？

在响应式编程中，流(Streams)是一个核心概念，它代表随时间推移产生的一系列值。而Observables则是这个概念的实现蓝图，它定义了如何创建流、订阅流、响应新值以及如何组合多个流来构建新的流。

Observables目前正在讨论是否会被纳入ES7版本的JavaScript标准中。由于ES6的普及还需要时间，即使Observables被纳入标准，我们也需要等待多年才能原生使用。因此，我们需要一个库来提供Observable原语，这就是RxJS的用武之地。

RxJS简介

RxJS全称是Reactive Extensions for JavaScript，它提供了JavaScript中Observables的实现。可以把它看作是未来JavaScript原生支持Observables前的过渡方案。

RxJS是ReactiveX API的JavaScript实现，这个API有多种语言版本，包括RxJAVA、Rx.NET、RxPY等。学习RxJS意味着你也能轻松掌握其他语言的响应式扩展。

在项目中使用RxJS

在Angular 6及以上版本中，RxJS 6已经是强制依赖项，无需手动安装。但如果需要单独使用，可以通过以下方式引入：

使用npm安装：

npm install rxjs

通过CDN引入：

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

在代码中，可以通过import语句引入需要的操作符和创建函数：

import { map, filter, take } from "rxjs/operators";
import { interval, pipe } from "rxjs";

RxJS核心概念与操作符

冷热Observables

Observables分为冷(Cold)和热(Hot)两种状态：

冷Observable：在被订阅前不会产生数据
热Observable：在被订阅后开始产生数据

基础操作符示例

interval操作符

创建一个按固定时间间隔发出递增数字的Observable：

import { interval } from 'rxjs';
const numbers = interval(1000); // 每秒发出一个数字

subscribe方法

订阅Observable使其变为热Observable并开始产生数据：

numbers.subscribe(value => console.log("Subscriber: " + value));

take操作符

限制只取前n个值：

import { take } from 'rxjs/operators';
const takeThree = numbers.pipe(take(3));

map操作符

转换流中的值：

import { map } from 'rxjs/operators';
const mapped = numbers.pipe(
  take(3),
  map(v => Date.now())
);

操作符链式调用

RxJS 6引入了pipe方法，可以更优雅地链式调用多个操作符：

interval(1000)
  .pipe(
    take(3),
    map(v => Date.now())
  )
  .subscribe(value => console.log("Subscriber: " + value));

理解操作符：弹珠图

RxJS提供了大量操作符，学习这些操作符是掌握RxJS的关键。为了帮助理解，Rx团队使用弹珠图(Marble Diagram)来可视化操作符的功能。

弹珠图包含三个部分：

顶部线条：表示时间轴，上面的"弹珠"代表输入流随时间产生的值
中间部分：表示操作符及其转换逻辑
底部线条：表示操作后的输出流

例如，map操作符的弹珠图显示输入流中的每个值如何被转换后输出。通过观察弹珠在输入流和输出流中的变化，可以直观理解操作符的行为。

在Angular中使用RxJS

在Angular组件中，我们通常在生命周期钩子如ngOnInit中编写RxJS代码。以下是一个基本示例框架：

import { Component } from "@angular/core";

@Component({
  selector: "app",
  template: `
    <div>
      <p>Observables & RxJS示例</p>
      <p>(请查看控制台输出)</p>
    </div>
  `
})
export class AppComponent {
  ngOnInit() {
    // 在这里编写RxJS代码
  }
}