可观察对象与订阅
创建可观察流并订阅它们。
可观察对象与订阅 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
什么是 Observable
Observable 是一个随时间产生值的惰性流。在您执行 subscribe 之前，什么都不会发生。它可以产生零个或多个值，之后要么完成，要么发生错误。
RxJS 是 Angular 内置的响应式库，用于处理 HTTP、事件和计时器等异步工作。
创建 Observable
Observable 构造函数接收一个订阅者函数。调用 next() 来产生值，调用 complete() 来结束，调用 error() 来报告失败。
import { Observable } from 'rxjs';
const numbers$ = new Observable<number>(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete();
});订阅
订阅会开始执行。请传入一个包含 next、error 和 complete 处理函数的观察者。
numbers$.subscribe({
next: v => console.log('value', v),
error: err => console.error(err),
complete: () => console.log('done')
});
// value 1, value 2, value 3, doneObservables 具有惰性
只有在调用 subscribe() 后，订阅者函数才会运行。每次订阅都会触发一次全新且相互独立的执行（冷 Observable）。
const tick$ = new Observable(s => {
console.log('executing');
s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs创建辅助函数：of 和 from
您很少需要直接使用构造函数。使用 of 和 from 等辅助函数可以快速创建 Observables。
import { of, from } from 'rxjs';
of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));interval 和 timer 创建器
interval 按计划产生递增的数字；timer 等待一段时间后产生值。
import { interval, timer } from 'rxjs';
interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second
timer(2000).subscribe(() => console.log('after 2s'));HttpClient 返回 Observables
在 Angular 中，HttpClient 的方法会返回 Observables。只有在订阅后，请求才会发出。
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));Subscription 对象
subscribe() 会返回一个 Subscription。调用 unsubscribe() 可停止接收值并释放资源。
import { interval } from 'rxjs';
const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream完成与取消订阅
当 Observable 执行 complete() 或 error() 时，它会自动清理资源。对于无限流（例如 interval 和 DOM 事件），您必须自行取消订阅。
观察者简写形式
如果您只关心值，可以传入一个函数——它会成为 next 处理函数。
of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }热 Observable 与冷 Observable（简述）
冷 Observable 会在订阅时开始产生值，每个订阅者都会获得独立的执行过程（HTTP、of、interval）。热 Observable 无论是否有订阅者都会产生值，并会共享这些值（接下来我们将介绍 Subject）。
快速检查
测试您对 Observables 的理解。
回顾：Observables 与 Subscriptions
Observable 是一种惰性流，通过 subscribe() 激活。
- 使用 next 产生值，使用 complete 结束，使用 error 报告失败。
- HttpClient 的方法会返回 observables——它们在订阅时才会发出请求。
- 请取消无限流的订阅，以避免资源泄漏。
下一节：Subjects 和 BehaviorSubject。
常见问题解答
「可观察对象与订阅」课时是免费的吗？
是的 — 「可观察对象与订阅」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「可观察对象与订阅」这节课中我会学到什么？
创建可观察流并订阅它们。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「可观察对象与订阅」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。