Angular Promises Vs Observables explained with example. It will help you to crack Angular interview and land your dream job. Here we have explained Observables vs Promises and Subjects which is also type of observable. We have provided examples of these advanced concepts so it will help us to remember concepts as well as syntax. If you know Marathi language then you will get to understand this blog easily if not you can translate it in language you understand.
Angular हे Observables आणि Promises ह्या दोन्ही प्रकारच्या पद्धतीला asynchronous operations handle करण्यासाठी support करते. ह्या दोन्ही प्रकारांमध्ये कोणत्या characteristics वेगळ्या आहेत ते आपण बघूया.
Angular Promises Vs Observables
Observables:
1. Streaming Data: Observable हे RxJS library च्या Observable pattern वर based आहे. Observables आपल्याला data streams सोबत work करण्यास मदत होते तसेच observables हे multiple values ला asynchronously emit करू शकते.
2. Cancellation: Observables हे unsubscribe करून cancel होऊ शकते, ज्यामुळे resources manage करण्यास मदत होते आणि memory leaks prevent केले जाऊ शकते.
3.Operators: RxJS आपल्याला operators provide करते जसे कि (map, filter,reduce etc.) ज्यांचा वापर करून आपण observable ने emit केलेल्या data ला transform, combine करू शकतो.
4. Error Handling: catchError operator चा वापर करून आपण error handle करू शकतो.
5. Lazy Execution: Observables ला lazy execution देखील म्हणले जाते कारण, observable हे त्याला आपण जो पर्यंत subscribe केले जात नाही तो पर्यंत execute होत नाही.
Example:
import { Observable } from 'rxjs';
const observable = new Observable<number>(observer => {
observer.next(1);
observer.next(2);
observer.complete();
});
observable.subscribe({
next: value => console.log(value),
complete: () => console.log('Observable complete')
});Promises:
1.Single Value: Promises हे single asynchronous event किंवा single value handle करण्यासाठी design केले आहे.
2. Easier Syntax: Promises मध्ये observable सोबत तुलना केली तर syntax हा सोपा आहे.
3. No Cancellation: एकदा जर promise create केला कि त्याला cancel करता येत नाही, ज्यामुळे ते जर नीट handle नाही केले तर memory leak होऊ शकते.
4. Error Handling: .catch() method वापरून error handle केला जातो.
5. Eager Execution: Promise create केले की ते लगेच execute होते.
Example:
const promise = new Promise<number>((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
promise.then(value => console.log(value))
.catch(error => console.error(error));
What is Subject in Angular?
Angular मध्ये “Subject” हा observable चा एक type आहे ज्याचा वापर करून आपण value किंवा event ला multiple observer ला multicast करू शकतो. थोडक्यात आपण Subject ला data push करणार आणि Subject त्यानंतर data ला जे subscriber listen करत असतील त्या सर्व subscribers ला डेटा distribute करतो.
Example:
असे imagine करा तुमच्या application मध्ये एक असे component आहे ज्याला इतर component सोबत data ला share करायच आहे.
1. Creating a Subject:
import { Subject } from 'rxjs';
// Define a subject with a specific type of data it will emit
const dataSubject = new Subject<string>();
2. Pushing Data to the Subject:
// Push some data to the subject
dataSubject.next('Hello World');
3. Subscribing to the Subject:
// Subscribe to the subject to receive data
dataSubject.subscribe((data) => {
console.log('Received data:', data);
});
4. Pushing More Data:
// Push another piece of data
dataSubject.next('Another message');
वरील example चे explanation बघूया,
1. आपण dataSubject नावाचा Subject create केला आहे जो string emit करतो.
2. आपण dataSubject ला next() method चा वापर करून data ला push केले. next() method ला call केला की प्रत्येक वेळेस subscribers ला नवीन data सहित notify केले जाते.
3. जेव्हा data emit होतो आपण dataSubject ला data receive किंवा log करण्यासाठी subscribe करतो.
थोडक्यात Subject हे अधिक powerful आहे कारण ते observable आणि observer हे दोन्ही feature प्रदान करते. Subject हे observer किंवा subscriber ची list maintain करते आणि नवीन event किंवा data emit झाला की subscriber ला notify करते. ज्यावेळेस आपल्याला multiple components ला किंवा services ला एका central source मधून काही change करायचा असतो त्यावेळेस Subject हे खूप महत्वाचे आहे.
