深入理解 Angular 7 中的 Observables：从入门到实战应用

2026-02-14 12:01:31 0条评论 2次阅读 0人点赞

在构建现代 Web 应用程序时，我们经常需要处理复杂的异步操作，例如 HTTP 请求、用户输入事件或实时数据流。如果你是一名开发者，你可能会发现，仅仅依靠 Promise 或传统的回调函数往往难以优雅地处理这些场景，尤其是当涉及多个连续事件或数据取消机制时。在 Angular 7 应用程序中，Observables（可观察对象）为我们提供了一种极其强大的解决方案。

相比于传统的 Promise，Observables 不仅仅是一种处理异步事件的工具，它更被视为一种处理多值流和事件序列的更优越的解决方案。通过使用 RxJS（Reactive Extensions for JavaScript）库，我们可以对数据流进行声明式的处理，轻松实现过滤、映射、防抖等复杂逻辑。

在这篇文章中，我们将深入探讨 Angular 7 中 Observables 的核心概念，剖析其工作原理，并通过丰富的代码示例展示如何在实际开发中利用它们来构建响应式应用。无论你是初学者还是希望加深理解的开发者，这篇文章都将为你提供实用的见解和最佳实践。

什么是 Observable？

简单来说，Observable 是对在未来某个时间点可能到达的值或事件序列的惰性调用集合。它是 RxJS 中的核心构建块，允许我们以同步编程的方式处理异步逻辑。

与 Promise 的区别

你可能熟悉 Promise，它处理一个将在未来完成的单一值。一旦 Promise resolve（解决）或 reject（拒绝），它就结束了。而 Observable 的独特之处在于：

  • 多值传递：Observable 可以随着时间的推移传递任意数量的值，而不仅仅是一个。
  • 惰性执行：Observable 只有在消费者通过“订阅”发起请求时，才会真正开始执行其内部的逻辑。如果不订阅，Observable 内部的代码甚至不会运行。
  • 可取消：我们可以随时取消 Observable 的订阅，从而终止数据流，这在处理如自动完成输入框等高频事件时非常重要，可以有效节省内存资源。

订阅机制

Observables 的设计遵循“发布-订阅”模式。这意味着数据的生产者和消费者是分离的。消费者（通常是 Angular 中的组件或服务）必须显式地订阅 Observable 才能接收数据。正如 Angular 官方文档所言：

> "Observables 仅仅是被订阅了它的消费者所访问。"

这种机制带来了巨大的灵活性：我们可以定义一次数据源（如在服务中），然后让不同的组件根据需要订阅它，各自独立处理数据，互不干扰。在文章的后面，我们会详细讨论关于“取消订阅”的重要话题，以避免内存泄漏。

观察者

为了处理接收到的 Observable 消息，我们需要一个观察者。观察者是一个由回调函数组成的对象，用于定义 Observable 发出不同类型通知时该如何处理。

观察者接口通常包含以下三个核心回调方法，让我们逐一深入探讨：

1. next() – 接收数据

这是最常用的方法。每当 Observable 发出新值时，INLINECODEa0b8dd22 方法就会被调用。在一个 Observable 的生命周期内，INLINECODE3aa0682f 可能会被调用零次（例如一个空的事件流）或无数次（例如鼠标移动事件）。

#### 示例：基础的数据流

让我们看一个简单的例子。我们将创建一个 Observable 来模拟从 1 数到 10 的过程，并在控制台打印每一个数字。

import { Component, OnInit } from ‘@angular/core‘;
import { Observable } from ‘rxjs‘;

@Component({
    selector: ‘app-next-example‘,
    templateUrl: ‘./next-example.component.html‘,
    styleUrls: [‘./next-example.component.css‘]
})
export class NextExampleComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    
        // 定义一个新的 Observable
        // countOnetoTen 是我们的订阅者观察者逻辑
        const sqnc = new Observable(countOnetoTen);
     
        // 执行 Observable 并订阅
        // 我们传入一个对象，包含 next 方法来处理接收到的值
        sqnc.subscribe({
            next(num) { 
                console.log(‘当前数值:‘, num); 
            }
        });
        
        // 这个函数定义了 Observable 如何产生数据
        function countOnetoTen(observer) {
            // 循环产生数据
            for(var i = 1; i <= 10; i++) {
                // 通过调用 observer.next() 将数据推送给订阅者
                observer.next(i);
            }
        
            // 通常我们还需要处理清理逻辑，这里简单返回一个空对象
            // 这将在稍后的取消订阅部分详细讲解
            return {unsubscribe(){}};
        }
    }
}

输出结果：

控制台会依次输出 1 到 10 的数字。

深入理解：

在这个例子中，INLINECODEb83a367d 方法被调用时，INLINECODEedf747ec 函数开始执行。注意，如果没有 subscribe()，这个循环根本不会开始。这就是惰性的本质。

2. error() – 处理异常

这是处理错误的处理器。在异步编程中，错误是不可避免的。如果 Observable 内部发生错误，或者由于某些外部原因导致流无法继续，它会调用 error() 方法。

#### 关键特性：

  • 立即停止：一旦 INLINECODEc2e8ec32 被调用，Observable 的流就会立即终止。不再会有后续的 INLINECODE2cc8167f 调用，也不会调用 complete()。

#### 示例：捕获运行时错误

在这个示例中，我们故意在代码中引发一个错误，以便观察 error 的处理机制。为了防止整个应用崩溃，正确的错误处理至关重要。

import { Component, OnInit } from ‘@angular/core‘;
import { Observable } from ‘rxjs‘;

@Component({
    selector: ‘app-error-example‘,
    templateUrl: ‘./error-example.component.html‘,
    styleUrls: [‘./error-example.component.css‘]
})
export class ErrorExampleComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    
        // 创建一个会产生错误的 Observable
        const sqnc = new Observable(generateError);
     
        // 订阅时，我们不仅要处理 next，还要处理 error
        sqnc.subscribe({
            // 正常数据处理
            next(num) { console.log(‘正常值:‘, num); },
            // 错误捕获处理
            error(err) { 
                console.error(‘捕获到错误:‘, err); 
                console.log(‘Observable 流已终止‘);
            }
        });
        
        // 这个函数定义了 Observable 的行为
        function generateError(observer){
            try {
                // 这里故意调用一个不存在的函数 adddlert 来制造错误
                // 这将导致异常抛出
                observer.next(addalert("Welcome guest!"));
                
                // 如果上面出错，这行代码永远不会执行
                observer.next("这行不会被打印");
            } catch (e) {
                // 在 Observable 内部捕获异常并通知观察者
                observer.error(e);
            }
            
            return {unsubscribe(){}};
        }
    }

    // 这里只是为了让 TypeScript 不报错的辅助函数，实际上我们希望它出错
    addalert(str: string) { return str; }
}

输出结果：

控制台会输出“捕获到错误…”以及具体的错误信息，而程序不会因此卡死。

实战建议：

在 Angular 服务中获取 HTTP 数据时，INLINECODE6aad73bd 返回的就是 Observable。你几乎总是应该在订阅时提供 INLINECODE318efbf3 回调，或者使用 RxJS 的 catchError 操作符，以防止网络错误导致页面无响应。

3. complete() – 完成通知

这是一个通知处理器，用于告知 Observable 的执行已经正常结束。complete() 不传递任何值，它仅仅是一个信号，表示“我已做完所有工作，不再有数据了”。

#### 示例：执行完毕后的回调

让我们看一个例子，它展示了当 INLINECODEc92a16a0 流处理完毕后，如何触发 INLINECODEca3093d0 通知。这对于执行一些清理工作或者隐藏加载中的提示非常有用。

import { Component, OnInit } from ‘@angular/core‘;
import { Observable } from ‘rxjs‘;

@Component({
    selector: ‘app-complete-example‘,
    templateUrl: ‘./complete-example.component.html‘,
    styleUrls: [‘./complete-example.component.css‘]
})
export class CompleteExampleComponent implements OnInit {

    constructor() { }

    ngOnInit() {
     
        // 创建 Observable
        const sqnc = new Observable(countOnetoTen);
 
        // 订阅并处理 next 和 complete
        sqnc.subscribe({
            // 打印每个数字
            next(num) { 
                console.log(‘接收值:‘, num); 
            },
            // 当流结束时调用
            complete(){ 
                console.log(‘任务完成：所有数字已接收完毕！‘);
            }
        });
        
        // 定义 Observable 逻辑
        function countOnetoTen(observer) {
            let loopCount = 0;
            for(var i = 1; i <= 10; i++) {
                loopCount++;
                observer.next(i);
            }
            
            // 显式通知完成
            // 这告诉订阅者：我会给你发消息了，你可以结束了
            observer.complete(); 
            
            // 注意：调用 complete 后，再次调用 next 是无效的，订阅者不会收到
            observer.next(11); // 不会触发订阅者的 next
            
            return {unsubscribe(){}};
        }
    }
}

实战应用：利用 RxJS 操作符

在实际开发中，我们很少像上面那样直接 new Observable。相反，我们会使用 Angular 内置的 HttpClient 服务（它返回 Observable）以及 RxJS 提供的强大操作符。

操作符允许我们在数据到达 subscribe 之前，对其进行转换、过滤或组合。

场景：搜索框自动完成

想象一下，你正在实现一个搜索功能。每当用户输入一个关键词，你都需要向后端发送请求。如果用户输入很快，每敲一次键盘就发一个请求，不仅浪费资源，还可能导致前一个请求的结果覆盖后一个请求的结果（竞态条件）。

解决方案：使用 INLINECODE560b9dff 和 INLINECODEb5baff4b

import { Component, OnInit } from ‘@angular/core‘;
import { Subject } from ‘rxjs‘;
import { debounceTime, distinctUntilChanged } from ‘rxjs/operators‘;

@Component({
  selector: ‘app-search‘,
  template: ``
})
export class SearchComponent implements OnInit {
  
  // 使用 Subject 作为一种特殊的 Observable
  private searchTerms = new Subject();

  constructor() {}

  ngOnInit() {
    // 我们对 searchTerms 流进行处理
    this.searchTerms.pipe(
      // 1. debounceTime: 只有在用户停止输入 300毫秒后才发射值，减少请求频率
      debounceTime(300),

      // 2. distinctUntilChanged: 只有当当前的值与上一个值不同时才发射，避免重复请求
      distinctUntilChanged()
    ).subscribe(term => {
      // 这里调用真正的 API 服务
      this.searchService.search(term).subscribe(results => {
        console.log(‘搜索结果:‘, results);
      });
    });
  }

  // 每次输入事件触发时，将值推入 searchTerms
  onSearch(event: Event) {
    const inputElement = event.target as HTMLInputElement;
    this.searchTerms.next(inputElement.value);
  }
}

这个例子展示了 Observables 和 RxJS 的真正威力：我们可以通过声明式的代码解决复杂的异步交互问题。

最佳实践与注意事项

在使用 Observables 时，有几个关键点需要特别注意，以避免常见的陷阱。

1. 订阅与取消订阅

这是 Observables 相比于 Promise 最容易被忽视的地方。正如我们在前面的代码中看到的 return {unsubscribe(){}};
，Observables 支持资源的清理。

在 Angular 组件中，如果你订阅了一个 Observable，但组件在数据返回之前就被销毁了（例如用户跳转到了其他页面），那么组件中的 subscribe 回调仍然会尝试执行。这会导致严重的内存泄漏，甚至引发错误（例如试图更新一个不存在的视图）。

#### 如何解决？

使用 INLINECODEfc47fdf5 或者 Angular 提供的 INLINECODE2ca977f9 模式。

传统方式：

import { Component, OnInit, OnDestroy } from ‘@angular/core‘;
import { Observable, Subscription } from ‘rxjs‘;

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    const observable = new Observable(observer => {...});
    
    // 保存订阅引用
    this.subscription = observable.subscribe(value => {
      console.log(value);
    });
  }

  ngOnDestroy() {
    // 组件销毁时，必须取消订阅
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

2. 使用 AsyncPipe 自动管理

在 Angular 模板中，我们有一个更优雅的选择：AsyncPipe。它会自动订阅 Observable，并在组件销毁时自动取消订阅，大大简化了代码。


export class UserComponent {
  user$ = this.http.get(‘/api/user‘); // 注意 $ 符号通常用来表示 Observable
}




  
{{ user.name }}

这种方式既安全又简洁，是我们强烈推荐的做法。

常见错误与解决方案

在开发过程中，你可能会遇到一些常见问题。让我们来看看如何解决它们。

错误："Property ‘subscribe‘ does not exist"

如果你遇到这个 TypeScript 错误，通常是因为你试图在一个非 Observable 的对象上调用 subscribe，或者没有正确导入 RxJS 操作符导致类型推断失败。请确保你导入了 import { Observable } from ‘rxjs‘;。

问题：内存泄漏

症状：即使你离开了页面，控制台仍在打印日志或网络请求仍在继续。
原因：忘记取消订阅。
解决方案：如上所述，始终在 INLINECODE99047779 中进行清理，或使用 INLINECODEff0c38a0。一个很好的模式是创建一个 destroy$ Subject：

private destroy$ = new Subject();

ngOnInit() {
  interval(1000).pipe(
    takeUntil(this.destroy$) // 当 destroy$ 发出值时，流自动结束
  ).subscribe(val => console.log(val));
}

ngOnDestroy() {
  this.destroy$.next(); // 发出信号结束流
  this.destroy$.complete();
}

总结与后续步骤

Observables 是现代 Angular 开发的基石。虽然上手可能比 Promise 稍微复杂一点，但它提供的强大功能足以回报你的学习成本。在这篇文章中，我们学习了：

  • Observable 的惰性本质和订阅机制。
  • 观察者的三个核心回调：INLINECODEc5b69326、INLINECODE530ceedb 和 complete()。
  • 如何处理错误和异常。
  • 使用 RxJS 操作符（如 debounceTime）优化数据流。
  • 至关重要的取消订阅策略，以防止内存泄漏。

下一步建议

现在你已经掌握了基础，下一步建议你深入了解 HTTP 客户端 与 Observables 的结合使用，以及如何使用 RxJS 的 INLINECODE22d3c569 和 INLINECODEe81b11ae 操作符来处理业务数据。这将帮助你在实际项目中构建出更健壮、响应更灵敏的应用程序。

希望这篇文章对你理解 Angular 7 中的 Observables 有所帮助。快去试试吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/49327.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年