Observable là gì và Angular sử dụng RxJS như thế nào?

Question

Accepted Answer

Một **Observable** (từ thư viện **RxJS**) đại diện cho một **luồng các giá trị theo thời gian** mà bạn có thể subscribe vào. Angular dùng RxJS khắp nơi — các request HTTP, sự kiện router, forms, và `EventEmitter` đều dựa trên Observable — nên hiểu chúng là điều thiết yếu. ## Observable so với Promise ```text Promise: một giá trị tương lai DUY NHẤT, eager, không thể hủy Observable: KHÔNG đến NHIỀU giá trị theo thời gian, lazy (chạy khi subscribe), HỦY ĐƯỢC ``` Observable có thể phát nhiều giá trị, chỉ thực thi khi được subscribe, và có thể unsubscribe (hủy) — khiến chúng lý tưởng cho sự kiện, luồng, và HTTP mà bạn có thể muốn hủy. ## Subscribe ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // mỗi giá trị được phát ra error: (err) => console.error(err), // khi có lỗi complete: () => console.log("done"), // luồng đã kết thúc }); ``` Không gì xảy ra cho tới khi bạn `.subscribe()` — Observable là lazy. ## Operator biến đổi luồng ```ts import { map, filter, debounceTime } from "rxjs/operators"; this.searchInput.valueChanges.pipe( debounceTime(300), // chờ tới khi ngừng gõ filter(text => text.length > 2), // bỏ qua các truy vấn ngắn map(text => text.trim()), // biến đổi ).subscribe(query => this.search(query)); ``` Các operator (nối chuỗi trong `.pipe()`) biến đổi luồng theo lối khai báo — debounce, filter, map, v.v. — giải quyết các bài toán async phổ biến (như search-as-you-type) một cách thanh lịch. ## Nguy cơ memory-leak: unsubscribe ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ ngăn rò rỉ ``` Các subscription thủ công phải được dọn dẹp trong `ngOnDestroy`, nếu không chúng tiếp tục chạy sau khi component đã biến mất — một memory leak. Các giải pháp phổ biến: **pipe `async`** (tự động unsubscribe), hoặc `takeUntilDestroyed()`. ```html

``` ## Tại sao điều này quan trọng Observable của RxJS đan xuyên suốt Angular — bạn không thể dùng HttpClient, reactive forms, hay router mà không có chúng. Hiểu subscription, operator, và đặc biệt là **unsubscribe** (hoặc dùng pipe `async` để tránh quản lý thủ công) là tối quan trọng: nó vừa là nguồn sức mạnh của Angular cho dữ liệu async vừa là một trong những cạm bẫy phổ biến nhất của nó (rò rỉ từ các subscription bị quên).