Observable ਕੀ ਹਨ ਅਤੇ Angular RxJS ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

ਇੱਕ **Observable** (**RxJS** ਲਾਇਬ੍ਰੇਰੀ ਤੋਂ) **ਸਮੇਂ ਦੇ ਨਾਲ ਮੁੱਲਾਂ ਦਾ ਇੱਕ ਪ੍ਰਵਾਹ** ਦੀ ਨੁਮਾਇੰਦਗੀ ਕਰਦਾ ਹੈ ਜਿਸ 'ਤੇ ਤੁਸੀਂ ਸਬਸਕ੍ਰਾਈਬ ਕਰ ਸਕਦੇ ਹੋ। Angular RxJS ਦੀ ਵਿਆਪਕ ਵਰਤੋਂ ਕਰਦਾ ਹੈ — HTTP ਬੇਨਤੀਆਂ, ਰਾਊਟਰ ਈਵੈਂਟਸ, ਫਾਰਮ, ਅਤੇ `EventEmitter` ਸਭ Observable-ਆਧਾਰਿਤ ਹਨ — ਇਸ ਲਈ ਉਹਨਾਂ ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ। ## 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 ``` Observables ਕਈ ਮੁੱਲ ਬਾਹਰ ਕੱਢ ਸਕਦੇ ਹਨ, ਸਿਰਫ ਸਬਸਕ੍ਰਾਈਬ ਹੋਣ 'ਤੇ ਚਲਦੇ ਹਨ, ਅਤੇ ਅਨ-ਸਬਸਕ੍ਰਾਈਬ (ਰੱਦ) ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ — ਇਸ ਨੂੰ ਈਵੈਂਟਸ, ਸਟ੍ਰੀਮਜ਼, ਅਤੇ HTTP ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਰੱਦ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ। ## ਸਬਸਕ੍ਰਾਈਬ ਕਰਨਾ ```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()` ਕਾਲ ਨਹੀਂ ਕਰਦੇ — Observable ਸੁਸਤ ਹੈ। ## ਅਪਰੇਟਰ ਸਟ੍ਰੀਮਜ਼ ਨੂੰ ਪਰਿਵਰਤਿਤ ਕਰਦੇ ਹਨ ```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)); ``` Aperators (`.pipe()` ਦੇ ਅੰਦਰ ਚੇਨ ਕੀਤੇ) ਸਟ੍ਰੀਮ ਨੂੰ ਘੋਸ਼ਣਾਤਮਕ ਤੌਰ 'ਤੇ ਪਰਿਵਰਤਿਤ ਕਰਦੇ ਹਨ — debounce, filter, map, ਆਦਿ — ਆਮ async ਸਮੱਸਿਆਵਾਂ (ਜਿਵੇਂ search-as-you-type) ਨੂੰ ਸੁੰਦਰ ਢੰਗ ਨਾਲ ਹੱਲ ਕਰਦੇ ਹਨ। ## ਮੈਮੋਰੀ-ਲੀਕ ਖਤਰਾ: unsubscribe ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` Manual subscriptions ਨੂੰ `ngOnDestroy` ਵਿੱਚ ਸਾਫ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਨਹੀਂ ਤਾਂ ਉਹ ਕੰਪੋਨੈਂਟ ਦੇ ਜਾਣ ਤੋਂ ਬਾਅਦ ਵੀ ਚਲਦੇ ਰਹਦੇ ਹਨ — ਇੱਕ ਮੈਮੋਰੀ ਲੀਕ। ਆਮ ਹੱਲ: **`async` pipe** (auto-unsubscribes), ਜਾਂ `takeUntilDestroyed()`। ```html

``` ## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ ਕਿਉਂ RxJS Observables Angular ਦੁਆਰਾ ਬੁਣੇ ਗਏ ਹਨ — ਤੁਸੀਂ HttpClient, reactive forms, ਜਾਂ ਰਾਊਟਰ ਦੀ ਵਰਤੋਂ ਬਿਨਾ ਨਹੀਂ ਕਰ ਸਕਦੇ। Subscription, operators, ਅਤੇ ਖਾਸ ਤੌਰ 'ਤੇ **unsubscribing** (ਜਾਂ manual management ਤੋਂ ਬਚਣ ਲਈ `async` pipe ਦੀ ਵਰਤੋਂ) ਨੂੰ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ: ਇਹ async data ਲਈ Angular ਦੀ ਸ਼ਕਤੀ ਦਾ ਸਰੋਤ ਅਤੇ ਇਸਦੇ ਸਭ ਤੋਂ ਆਮ ਨੁਕਸਾਨ (ਭੁੱਲੇ ਹੋਏ subscriptions ਤੋਂ leaks) ਦੋਵੇਂ ਹਨ।