Angular Academy · पाठ

संयोजन ऑपरेटर

combineLatest और forkJoin से स्ट्रीम संयोजित करें।

पाठ 3, कुल 4 में से13 चरण

संयोजन ऑपरेटर, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्ट्रीम को संयोजित क्यों करें

वास्तविक ऐप कई एसिंक्रोनस स्रोतों का समन्वय करते हैं: कई HTTP कॉल, किसी फ़ॉर्म का मान और फ़िल्टर, या किसी क्लिक के साथ नवीनतम स्थिति। संयोजन ऑपरेटर कई ऑब्ज़र्वेबल को एक में मिला देते हैं।

combineLatest

combineLatest हर स्रोत से नवीनतम मानों की एक सारणी का उत्सर्जन करता है, जब भी कोई भी स्रोत उत्सर्जन करता है — लेकिन तभी जब सभी स्रोत कम-से-कम एक बार उत्सर्जन कर चुके हों।

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

combineLatest का उपयोग

व्युत्पन्न UI स्थिति के लिए बहुत उपयोगी: खोज शब्द और श्रेणी फ़िल्टर को मिलाकर एक क्वेरी बनाएँ।

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin सभी स्रोतों के पूरी तरह समाप्त होने की प्रतीक्षा करता है, फिर उनके अंतिम मानों की एक सारणी का उत्सर्जन करता है। यह RxJS में Promise.all के समान है।

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

forkJoin की सावधानी

यदि कोई स्रोत कभी पूरा नहीं होता, जैसे कोई अंतराल, या पूरा होने से पहले त्रुटि देता है, तो forkJoin कुछ भी उत्सर्जित नहीं करता। इसका उपयोग HTTP अनुरोधों जैसे सीमित स्रोतों के लिए करें।

merge

merge कई ऑब्ज़र्वेबल को एक में फ्लैट करता है और बिना किसी जोड़ीकरण के, किसी भी स्रोत से मान आते ही उनका उत्सर्जन करता है।

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip मानों को उनके क्रमांक के आधार पर जोड़ता है: पहले प्रत्येक स्रोत का पहला मान, फिर प्रत्येक का दूसरा मान, और इसी तरह आगे। यह अगले मान के लिए सभी स्रोतों के मान उत्पन्न करने की प्रतीक्षा करता है।

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith शुरुआत में एक प्रारंभिक मान जोड़ता है। यह उपयोगी है, ताकि हर स्रोत के उत्सर्जन से पहले ही combineLatest उत्सर्जन कर सके।

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom केवल तभी उत्सर्जन करता है जब स्रोत उत्सर्जन करता है और अन्य ऑब्ज़र्वेबल के नवीनतम मान साथ जोड़ता है। नियंत्रण स्रोत के पास होता है; अन्य निष्क्रिय रहते हैं।

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

क्रमिक स्ट्रीम के लिए concat

concat प्रत्येक स्रोत को क्रम से सब्सक्राइब करता है और वर्तमान स्रोत के पूरा होने के बाद ही अगले पर जाता है। जब स्ट्रीम को सख्ती से एक के बाद एक चलाना हो, तब इसका उपयोग करें।

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest बनाम forkJoin बनाम zip

combineLatest: किसी भी उत्सर्जन पर प्रत्येक का नवीनतम मान।
forkJoin: सभी के पूरा होने के बाद प्रत्येक का अंतिम मान।
zip: क्रमांक के आधार पर जोड़े गए मान।
आपको लगातार अपडेट, एक बार का संयोजन या सख्त जोड़ीकरण चाहिए—इसके आधार पर चुनें।

त्वरित जाँच

संयोजन ऑपरेटरों की अपनी समझ जाँचिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: संयोजन ऑपरेटर

संयोजन ऑपरेटर कई स्ट्रीम का समन्वय करते हैं।

combineLatest: किसी भी उत्सर्जन पर प्रत्येक का नवीनतम मान।
forkJoin: पूरा होने पर संयोजन (Promise.all जैसा)।
merge: सभी उत्सर्जनों को आपस में मिलाना।
withLatestFrom: स्रोत द्वारा संचालित अन्य मानों का स्नैपशॉट।

अगला विषय: त्रुटि-प्रबंधन ऑपरेटर।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “संयोजन ऑपरेटर” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “संयोजन ऑपरेटर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“संयोजन ऑपरेटर” में मैं क्या सीखूँगा?

combineLatest और forkJoin से स्ट्रीम संयोजित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“संयोजन ऑपरेटर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ