🚇 💅🏻 🚴🏿 RxJS का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग की मूल बातें। भाग 2. संचालक और पाइप 🌄 Ⓜ️ 🤚

पिछले लेख में, हमने देखा कि क्या धाराएँ हैं और वे क्या खाती हैं। नए भाग में, हम आरएक्सजेएस प्रवाह बनाने के लिए कौन से तरीके प्रदान करते हैं, ऑपरेटर, पाइप क्या हैं और उनके साथ कैसे काम करना है, इससे परिचित होंगे।

लेखों की श्रृंखला "RxJS का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग के मूल तत्व":

RxJS के पास एक समृद्ध एपीआई है । प्रलेखन सौ से अधिक तरीकों का वर्णन करता है। उन्हें थोड़ा सा जानने के लिए, हम एक सरल आवेदन लिखेंगे और व्यवहार में हम देखेंगे कि प्रतिक्रियाशील कोड कैसा दिखता है। आप देखेंगे कि समान कार्य, जो नियमित रूप से प्रतीत होते थे और बहुत सारे कोड लिखने की आवश्यकता होती थी, यदि आपके पास प्रतिक्रिया के प्रिज्म के माध्यम से देखते हैं तो एक सुरुचिपूर्ण समाधान है। लेकिन व्यवहार में आने से पहले, हम देखेंगे कि कैसे प्रवाह को रेखांकन के रूप में दर्शाया जा सकता है और उन्हें बनाने और संसाधित करने के लिए सुविधाजनक तरीकों से परिचित किया जा सकता है।

धागे का चित्रमय प्रतिनिधित्व

यह स्पष्ट रूप से प्रदर्शित करने के लिए कि एक विशेष प्रवाह कैसे व्यवहार करता है, मैं प्रतिक्रियाशील दृष्टिकोण में अपनाई गई धारणा का उपयोग करूंगा। पिछले लेख से हमारे उदाहरण को याद करें:

const observable = new Observable((observer) => { observer.next(1); observer.next(2); observer.complete(); });

यहाँ इसका चित्रमय प्रतिनिधित्व कैसा दिखेगा:

प्रवाह को आमतौर पर एक सीधी रेखा के रूप में दर्शाया जाता है। यदि धारा किसी भी मान का उत्सर्जन करती है, तो यह एक सर्कल के रूप में लाइन पर प्रदर्शित होता है। प्रदर्शन में एक सीधी रेखा धारा को समाप्त करने का संकेत है। त्रुटि को प्रदर्शित करने के लिए, प्रतीक - "×" का उपयोग करें।

 const observable = new Observable((observer) => { observer.error(); });

एक पंक्ति धारा

मेरे अभ्यास में, मुझे शायद ही कभी सीधे तौर पर अपने स्वयं के अवलोकन उदाहरण बनाने पड़ते थे। धागे बनाने की अधिकांश विधियाँ पहले से ही RxJS में हैं। 1 और 2 मान उत्सर्जित करने वाली धारा बनाने के लिए, यह विधि का उपयोग करने के लिए पर्याप्त है:

 const observable = of(1, 2);

विधि किसी भी संख्या के तर्कों को स्वीकार करती है और वेधशाला के समाप्त उदाहरण को वापस करती है। सदस्यता लेने के बाद, यह प्राप्त मूल्यों को पूर्ण करेगा और पूरा करेगा:

यदि आप एक स्ट्रीम के रूप में सरणी का प्रतिनिधित्व करना चाहते हैं, तो आप विधि से उपयोग कर सकते हैं। एक तर्क के रूप में विधि से किसी भी चलने योग्य वस्तु (सरणी, स्ट्रिंग, आदि) या वादे की उम्मीद है, और इस ऑब्जेक्ट को स्ट्रीम पर प्रोजेक्ट करता है। यहाँ स्ट्रिंग से प्राप्त धारा क्या होगी:

 const observable = from('abc');

और इसलिए, आप एक स्ट्रीम में एक वादा लपेट सकते हैं:

 const promise = new Promise((resolve, reject) => { resolve(1); }); const observable = from(promise);

नोट: अक्सर धागे की तुलना वादा से की जाती है। वास्तव में, उनके पास केवल एक ही चीज है - परिवर्तन फैलाने के लिए एक धक्का रणनीति । बाकी पूरी तरह से अलग संस्थाएं हैं। वादा कई मूल्यों का उत्पादन नहीं कर सकता। यह केवल समाधान या अस्वीकार को निष्पादित कर सकता है, अर्थात। केवल दो राज्य हैं। एक धारा कई मूल्यों को प्रसारित कर सकती है, और पुन: उपयोग कर सकती है।

क्या आपको पहले लेख से अंतराल के साथ उदाहरण याद है? यह स्ट्रीम एक टाइमर है जो सदस्यता के क्षण से सेकंड में समय की गणना करता है।

 const timer = new Observable(observer => { let counter = 0; const intervalId = setInterval(() => { observer.next(counter++); }, 1000); return () => { clearInterval(intervalId); } });

यहाँ आप एक ही चीज़ को एक पंक्ति में कैसे लागू कर सकते हैं:

 const timer = interval(1000);

और अंत में, एक विधि जो आपको DOM तत्वों के लिए घटनाओं की एक धारा बनाने की अनुमति देती है:

 const observable = fromEvent(domElementRef, 'keyup');

मानों के रूप में, यह स्ट्रीम कीप ईवेंट ऑब्जेक्ट को प्राप्त और उत्सर्जित करेगा।

पाइप और ऑपरेटर

पाइप एक अवलोकन योग्य कक्षा विधि है जिसे 5.5 संस्करण में RxJS में जोड़ा गया है। इसके लिए धन्यवाद, हम स्ट्रीम में प्राप्त मूल्यों के अनुक्रमिक प्रसंस्करण के लिए ऑपरेटरों की श्रृंखला बना सकते हैं। पाइप एक यूनिडायरेक्शनल चैनल है जो ऑपरेटरों को इंटरकनेक्ट करता है। ऑपरेटर स्वयं आरएक्सजेएस में वर्णित सामान्य कार्य हैं जो एक धारा से मूल्यों को संसाधित करते हैं।

उदाहरण के लिए, वे मान को परिवर्तित कर सकते हैं और इसे स्ट्रीम में आगे पास कर सकते हैं, या वे फ़िल्टर के रूप में कार्य कर सकते हैं और किसी भी मान को छोड़ नहीं सकते हैं यदि वे निर्दिष्ट स्थिति को पूरा नहीं करते हैं।

आइए कार्रवाई में ऑपरेटरों को देखें। मानचित्र ऑपरेटर का उपयोग करके धारा से प्रत्येक मान को 2 से गुणा करें:

 of(1,2,3).pipe( map(value => value * 2) ).subscribe({ next: console.log });

मानचित्र ऑपरेटर को लागू करने से पहले स्ट्रीम क्या दिखता है:

मानचित्र विवरण के बाद:

फिल्टर ऑपरेटर का उपयोग करते हैं। यह कथन ऐरे क्लास में फिल्टर फ़ंक्शन की तरह ही काम करता है। विधि एक फ़ंक्शन को पहले तर्क के रूप में लेती है, जो एक स्थिति का वर्णन करती है। यदि धारा से मूल्य स्थिति को संतुष्ट करता है, तो इसे पारित किया जाता है:

 of(1, 2, 3).pipe( //     filter(value => value % 2 !== 0), map(value = value * 2) ).subscribe({ next: console.log });

और इस तरह हमारी धारा की पूरी योजना दिखाई देगी:

फ़िल्टर के बाद:

मानचित्र के बाद:

नोट: पाइप! == सदस्यता लें। पाइप विधि प्रवाह व्यवहार की घोषणा करती है, लेकिन सदस्यता नहीं देती है। जब तक आप सदस्यता विधि को कॉल नहीं करेंगे, तब तक आपकी स्ट्रीम काम करना शुरू नहीं करेगी।

हम एक आवेदन लिख रहे हैं

अब जब हमें पता चला है कि पाइप और ऑपरेटर क्या हैं, तो आप अभ्यास करने के लिए नीचे उतर सकते हैं। हमारा आवेदन एक सरल कार्य करेगा: दर्ज किए गए स्वामी के उपनाम द्वारा खुले जीथब रिपॉजिटरी की सूची प्रदर्शित करें।

कुछ आवश्यकताएँ होंगी:

यदि कोई इनपुट में दर्ज स्ट्रिंग में 3 से कम अक्षर हैं, तो एपीआई अनुरोध को निष्पादित न करें;
उपयोगकर्ता द्वारा दर्ज किए गए प्रत्येक चरित्र के अनुरोध को पूरा नहीं करने के लिए, एपीआई तक पहुंचने से पहले 700 मिलीसेकंड की देरी (पराजय) निर्धारित करना आवश्यक है;

रिपॉजिटरी की खोज के लिए, हम github API का उपयोग करेंगे। मैं खुद को स्टैकब्लिट्ज़ पर उदाहरण चलाने की सलाह देता हूं । वहाँ मैंने तैयार क्रियान्वयन किया। लेख के अंत में लिंक दिए गए हैं।

चलिए html मार्कअप से शुरू करते हैं। आइए इनपुट और उल तत्वों का वर्णन करते हैं:

 <input type="text"> <ul></ul>

फिर js या ts फ़ाइल में हमें ब्राउज़र API का उपयोग करके वर्तमान तत्वों के लिंक मिलते हैं:

 const input = document.querySelector('input'); const ul = document.querySelector('ul');

हमें एक ऐसी विधि की भी आवश्यकता है जो github API के अनुरोध को निष्पादित करे। नीचे getUsersRepsFromAPI फ़ंक्शन के लिए कोड है, जो उपयोगकर्ता के उपनाम को स्वीकार करता है और लाने के लिए एक अजाक्स अनुरोध करता है। फिर यह एक वादा वापस करता है, जिस तरह से साथ में सफल प्रतिक्रिया को परिवर्तित करता है:

 const getUsersRepsFromAPI = (username) => { const url = `https://api.github.com/users/${ username }/repos`; return fetch(url) .then(response => { if(response.ok) { return response.json(); } throw new Error(''); }); }

अगला, हम एक विधि लिखते हैं जो रिपॉजिटरी के नाम सूचीबद्ध करेगी:

 const recordRepsToList = (reps) => { for (let i = 0; i < reps.length; i++) { //    ,    if (!ul.children[i]) { const newEl = document.createElement('li'); ul.appendChild(newEl); } //      const li = ul.children[i]; li.innerHTML = reps[i].name; } //    while (ul.children.length > reps.length) { ul.removeChild(ul.lastChild); } }

तैयारियां पूरी हैं। यह कार्रवाई में RxJS पर एक नज़र डालने का समय है। हमें अपने इनपुट की कीप ईवेंट को सुनना होगा। सबसे पहले, हमें यह समझना चाहिए कि प्रतिक्रियात्मक दृष्टिकोण में, हम प्रवाह के साथ काम करते हैं। सौभाग्य से, RxJS पहले से ही एक समान विकल्प प्रदान करता है। ऊपर बताई गयी विधि से याद रखें। हम इसका उपयोग करते हैं:

 const keyUp = fromEvent(input, 'keyup'); keyUp.subscribe({ next: console.log });

अब हमारे कार्यक्रम को एक धारा के रूप में प्रस्तुत किया गया है। यदि हम देखते हैं कि कंसोल में क्या प्रदर्शित किया गया है, तो हम एक प्रकार का कीबोर्ड देखेंगे। लेकिन हमें एक उपयोगकर्ता-दर्ज मूल्य की आवश्यकता है। यह वह जगह है जहां पाइप विधि और मानचित्र ऑपरेटर काम में आते हैं:

 fromEvent(input, 'keyup').pipe( map(event => event.target.value) ).subscribe({ next: console.log });

हम आवश्यकताओं के कार्यान्वयन के लिए आगे बढ़ते हैं। आरंभ करने के लिए, हम उस क्वेरी को निष्पादित करेंगे जब प्रविष्ट मूल्य में दो से अधिक अक्षर होंगे। ऐसा करने के लिए, फ़िल्टर ऑपरेटर का उपयोग करें:

 fromEvent(input, 'keyup').pipe( map(event => event.target.value), filter(value => value.length > 2) )

हम पहली आवश्यकता से निपटते हैं। हम दूसरे पर आगे बढ़ते हैं। हमें बहस को लागू करने की आवश्यकता है। RxJS में एक डिबेटटाइम स्टेटमेंट है। पहले तर्क के रूप में यह ऑपरेटर मिलीसेकंड की संख्या लेता है जिसके दौरान मूल्य पास होने से पहले आयोजित किया जाएगा। इस स्थिति में, प्रत्येक नया मान टाइमर को रीसेट करेगा। इस प्रकार, आउटपुट पर हमें अंतिम मूल्य मिलता है, जिसके बाद 700 मिलीसेकंड बीत चुके हैं।

 fromEvent(input, 'keyup').pipe( debounceTime(700), map(event => event.target.value), filter(value => value.length > 2) )

यहाँ हमारी धारा बहुरूपियों के बिना कैसी दिख सकती है:

और इस कथन के माध्यम से एक ही धारा कैसे निकलेगी:

डिबेटटाइम के साथ, हमें API का उपयोग करने की संभावना कम होगी, जो ट्रैफ़िक को बचाएगा और सर्वर को लोड करेगा।

अतिरिक्त अनुकूलन के लिए, मैं एक अन्य ऑपरेटर का उपयोग करने का सुझाव देता हूं - विशिष्ट-परिवर्तित। यह तरीका हमें डुप्लिकेट से बचाएगा। एक उदाहरण का उपयोग करके अपना काम दिखाना सबसे अच्छा है:

 from('aaabccc').pipe( distinctUntilChanged() )

बिना विशिष्ट परिवर्तन

अलग-अलग परिवर्तन के साथ:

डेब्यू टाइमटाइम स्टेटमेंट के तुरंत बाद इस स्टेटमेंट को जोड़ें। इस प्रकार, अगर किसी कारण से नया मान पिछले एक के साथ मेल खाता है, तो हम एपीआई तक नहीं पहुंचेंगे। एक समान स्थिति तब हो सकती है जब उपयोगकर्ता ने नए वर्ण दर्ज किए हैं और फिर उन्हें फिर से मिटा दिया है। चूंकि हमने देरी लागू की है, केवल अंतिम मान स्ट्रीम में आएगा, जिसका उत्तर हमारे पास पहले से है।

सर्वर पर जाएं

पहले से ही अब हम अनुरोध के तर्क और प्रतिक्रिया के प्रसंस्करण का वर्णन कर सकते हैं। जबकि हम केवल वादे के साथ काम कर सकते हैं। इसलिए, हम एक अन्य मानचित्र ऑपरेटर का वर्णन करते हैं जो getUsersRepsFromAPI विधि को कॉल करेगा। पर्यवेक्षक में, हम अपने वादे के प्रसंस्करण तर्क का वर्णन करते हैं:

 /*  !     RxJS    promise,      */ fromEvent(input, 'keyup').pipe( debounceTime(700), map(event => event.target.value), filter(val => val.length > 2), distinctUntilChanged(), map(value => getUsersRepsFromAPI(value)) ).subscribe({ next: promise => promise.then(reps => recordRepsToList(reps)) });

फिलहाल, हमने वह सब कुछ लागू किया है जो हम चाहते थे। लेकिन हमारे उदाहरण में एक बड़ी खामी है: इसमें कोई त्रुटि नहीं है। हमारे पर्यवेक्षक को केवल एक वादा मिलता है और इस बात का कोई अंदाजा नहीं है कि कुछ गलत हो सकता है।

बेशक, हम अगली विधि में वादे पर पकड़ बना सकते हैं, लेकिन इस वजह से, हमारा कोड अधिक से अधिक "कॉलबैक नरक" जैसा दिखने लगेगा। यदि अचानक हमें एक और अनुरोध को निष्पादित करने की आवश्यकता होती है, तो कोड की जटिलता बढ़ जाएगी।

नोट: RxJS कोड में वादे का उपयोग करना एंटीपैटर्न माना जाता है। अवलोकन के मुकाबले वादा में कई नुकसान हैं। यह पूर्ववत नहीं किया जा सकता है, और इसका पुन: उपयोग नहीं किया जा सकता है। यदि आपके पास कोई विकल्प है, तो अवलोकन करें। वही ऑब्जर्वेबल क्लास की टॉप्रोमाइज विधि के लिए जाता है। यह विधि पुस्तकालयों के साथ संगतता के लिए लागू की गई थी जो धाराओं के साथ काम नहीं कर सकते हैं।

हम एक स्ट्रीम पर वादे को प्रोजेक्ट करने के लिए विधि से उपयोग कर सकते हैं, लेकिन यह विधि सदस्यता विधि के लिए अतिरिक्त कॉल से भरा है, और कोड की वृद्धि और जटिलता को भी जन्म देगी।

इस समस्या को मर्ज मैप ऑपरेटर के उपयोग से हल किया जा सकता है:

 fromEvent(input, 'keyup').pipe( debounceTime(700), map(event => event.target.value), filter(val => val.length > 2), distinctUntilChanged(), mergeMap(value => from(getUsersRepsFromAPI(value))) ).subscribe({ next: reps => recordRepsToList(reps), error: console.log })

अब हमें वादा प्रसंस्करण तर्क लिखने की आवश्यकता नहीं है। विधि से एक वादा स्ट्रीम किया, और मर्जपैप ऑपरेटर ने इसे संसाधित किया। यदि वादा सफलतापूर्वक पूरा होता है, तो अगली विधि को बुलाया जाता है, और हमारे पर्यवेक्षक को समाप्त वस्तु प्राप्त होगी। यदि कोई त्रुटि होती है, तो त्रुटि पद्धति को कॉल किया जाएगा, और हमारा पर्यवेक्षक कंसोल में त्रुटि का उत्पादन करेगा।

मर्जपेज ऑपरेटर उन ऑपरेटरों से थोड़ा अलग है, जिनके साथ हमने पहले काम किया था; यह तथाकथित उच्च आदेश वेधशालाओं से संबंधित है , जिसकी चर्चा मैं अगले लेख में करूंगा। लेकिन, आगे देखते हुए, मैं कहूंगा कि मर्ज मैप विधि स्वयं स्ट्रीम की सदस्यता लेती है।

हैंडलिंग में त्रुटि

यदि हमारे धागे में त्रुटि मिलती है, तो यह समाप्त हो जाएगा। और अगर हम एक त्रुटि के बाद आवेदन के साथ बातचीत करने की कोशिश करते हैं, तो हमें कोई प्रतिक्रिया नहीं मिलेगी, क्योंकि हमारा धागा पूरा हो गया है।

यहाँ पकड़ने वाला ऑपरेटर हमारी मदद करेगा। catchError को तब ही उठाया जाता है जब स्ट्रीम में कोई त्रुटि होती है। यह आपको इसे बाधित करने, इसे संसाधित करने और सामान्य मान को स्ट्रीम में वापस करने की अनुमति देता है, जो इसके पूरा होने का कारण नहीं होगा।

 fromEvent(input, 'keyup').pipe( debounceTime(700), map(event => event.target.value), filter(val => val.length > 2), distinctUntilChanged(), mergeMap(value => from(getUsersRepsFromAPI(value))), catchError(err => of([])) ).subscribe({ next: reps => recordRepsToList(reps), error: console.log })

हम कैच एरर में त्रुटि को पकड़ते हैं और इसके बजाय एक खाली सरणी के साथ एक स्ट्रीम लौटाते हैं। अब, जब कोई त्रुटि होती है, तो हम रिपॉजिटरी की सूची को साफ कर देंगे। लेकिन फिर प्रवाह फिर से समाप्त हो जाता है।

बात यह है कि catchError हमारी मूल धारा को एक नए के साथ बदल देती है। और तब हमारा पर्यवेक्षक केवल उसकी सुनता है। जब धारा एक खाली सरणी का उत्सर्जन करती है, तो पूरी विधि को बुलाया जाएगा।

हमारे मूल धागे को प्रतिस्थापित नहीं करने के लिए, हम मर्जपेज ऑपरेटर के अंदर से थ्रेड पर से कैच ऑपरेटर को कॉल करते हैं।

 fromEvent(input, 'keyup').pipe( debounceTime(700), map(event => event.target.value), filter(val => val.length > 2), distinctUntilChanged(), mergeMap(value => { return from(getUsersRepsFromAPI(value)).pipe( catchError(err => of([])) ) }) ).subscribe({ next: reps => recordRepsToList(reps), error: console.log })

इस प्रकार, हमारी मूल धारा कुछ भी नोटिस नहीं करेगी। त्रुटि के बजाय, इसे एक खाली सरणी मिलेगी।

निष्कर्ष

हमने आखिरकार अभ्यास करना शुरू किया और देखा कि पाइप और ऑपरेटर क्या हैं। हमने यह देखा कि रिच एपीआई का उपयोग करके कोड को कैसे कम किया जाए जो आरएक्सजेएस हमें प्रदान करता है। बेशक, हमारा आवेदन समाप्त नहीं हुआ है, अगले भाग में हम विश्लेषण करेंगे कि कैसे एक धागे में दूसरे को संसाधित करना संभव है और हमारे आवेदन के और अधिक ट्रैफ़िक और संसाधनों को बचाने के लिए हमारे http अनुरोध को कैसे रद्द करना है। और ताकि आप अंतर देख सकें, मैंने आरएक्सजेएस का उपयोग किए बिना एक उदाहरण दिया, आप इसे यहां देख सकते हैं। इस लिंक पर आपको वर्तमान एप्लिकेशन का पूरा कोड मिलेगा। सर्किट उत्पन्न करने के लिए, मैंने RxJS विज़ुअलाइज़र का उपयोग किया।

मुझे उम्मीद है कि इस लेख ने आपको यह समझने में मदद की है कि RxJS कैसे काम करता है। मैं आपके अध्ययन में सफलता की कामना करता हूं!

RxJS का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग की मूल बातें। भाग 2. संचालक और पाइप