Observable'lar nedir ve Angular RxJS'i nasıl kullanır?

Question

Accepted Answer

Bir **Observable** (**RxJS** kütüphanesinden) **zaman içinde değerlerin bir akışını** temsil eder ve buna abone olabilirsiniz. Angular, RxJS'i yaygın şekilde kullanır — HTTP istekleri, yönlendirici olayları, formlar ve `EventEmitter` hepsi Observable'a dayalıdır — bu nedenle bunları anlamak gereklidir. ## Observable vs Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observable'lar birden fazla değer yayabilir, yalnızca abone olduğunda çalışır ve aboneliği iptal edilebilir (iptal edilebilir) — bunları olaylar, akışlar ve iptal etmek isteyebileceğiniz HTTP için ideal hale getirir. ## Abone Olma ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // each emitted value error: (err) => console.error(err), // on error complete: () => console.log("done"), // stream finished }); ``` `.subscribe()` çağrısını yapana kadar hiçbir şey olmaz — Observable tembel davranır. ## Operatörler akışları dönüştürür ```ts import { map, filter, debounceTime } from "rxjs/operators"; this.searchInput.valueChanges.pipe( debounceTime(300), // wait for typing to pause filter(text => text.length > 2), // ignore short queries map(text => text.trim()), // transform ).subscribe(query => this.search(query)); ``` Operatörler (`.pipe()` içinde zincirlenmiş) bildirimsel olarak akışı dönüştürür — debounce, filter, map vb. — yaygın async sorunlarını (arama-yazarken gibi) zarif bir şekilde çözer. ## Bellek sızıntısı tehlikesi: aboneliğin iptal edin ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` Manuel abonelikler `ngOnDestroy` içinde temizlenmelidir, aksi takdirde bileşen yok olduğundan sonra da çalışmaya devam eder — bir bellek sızıntısı. Yaygın çözümler: **`async` pipe** (otomatik olarak abonelikten çıkar) veya `takeUntilDestroyed()`. ```html

``` ## Neden önemli RxJS Observable'ları Angular'ın tamamına dokunmuştur — HttpClient'ı, reaktif formları veya yönlendiriciyi bunlar olmadan kullanamazsınız. Abonelik, operatörler ve özellikle **abonelikten çıkma**yı anlamak (veya manuel yönetimden kaçınmak için `async` pipe'ı kullanmak) kritiktir: bu hem async veriler için Angular'ın gücünün kaynağı hem de en yaygın tuzaklarından biridir (unutulmuş aboneliklerden gelen sızıntılar).