🥇 जाभास्क्रिप्टमा एसिन्क्रोनस प्रोग्रामिङ (कलब्याक, वाचा, RxJs)

नमस्ते सबै। Sergey Omelnitsky सम्पर्कमा हुनुहुन्छ। केही समय अघि मैले प्रतिक्रियात्मक प्रोग्रामिङमा स्ट्रिम होस्ट गरेको थिएँ, जहाँ मैले जाभास्क्रिप्टमा एसिन्क्रोनीको बारेमा कुरा गरेको थिएँ। आज म यस सामग्रीमा टिप्पणीहरू लिन चाहन्छु।

तर हामीले मुख्य सामग्री सुरु गर्नु अघि, हामीले एक परिचयात्मक नोट बनाउन आवश्यक छ। त्यसोभए परिभाषाहरूसँग सुरु गरौं: स्ट्याक र लाम के हो?

स्ट्याक एउटा संग्रह हो जसको तत्वहरू अन्तिम-इन, फर्स्ट-आउट LIFO आधारमा प्राप्त गरिन्छ

लाम एउटा संग्रह हो जसको तत्वहरू पहिलो-इन, फर्स्ट-आउट FIFO आधारमा प्राप्त गरिन्छ

ठीक छ, जारी राखौं।

JavaScript एकल-थ्रेडेड प्रोग्रामिङ भाषा हो। यसको अर्थ त्यहाँ कार्यान्वयनको एउटा मात्र थ्रेड र एउटा स्ट्याक छ जसमा कार्यहरू कार्यान्वयनका लागि लामबद्ध छन्। त्यसकारण, जाभास्क्रिप्टले एक पटकमा एउटा अपरेशन मात्र गर्न सक्छ, जबकि अन्य अपरेसनहरूले स्ट्याकमा आफ्नो पालो पर्खनेछन् जबसम्म उनीहरूलाई कल हुँदैन।

कल स्ट्याक एक डेटा संरचना हो जुन, सरल रूपमा भन्नुपर्दा, हामी जहाँ छौं कार्यक्रममा भएको स्थानको बारेमा जानकारी रेकर्ड गर्दछ। यदि हामीले फंक्शनमा पास गर्छौं भने, हामी यसको प्रविष्टिलाई स्ट्याकको शीर्षमा धकेल्छौं। जब हामी फंक्शनबाट फर्कन्छौं, हामी स्ट्याकबाट शीर्ष तत्व पप गर्छौं र हामीले फंक्शनलाई बोलाएको ठाउँमा फर्कन्छौं। स्ट्याकले गर्न सक्ने यो सबै हो। र अब एक धेरै रोचक प्रश्न। जाभास्क्रिप्टमा एसिन्क्रोनीले कसरी काम गर्छ?

वास्तवमा, स्ट्याकको अतिरिक्त, ब्राउजरहरूसँग तथाकथित WebAPI सँग काम गर्नको लागि विशेष लाम छ। स्ट्याक पूर्ण रूपमा खाली गरिसकेपछि मात्र यस लाममा भएका कार्यहरू क्रमबद्ध रूपमा कार्यान्वयन हुनेछन्। यसपछि मात्र उनीहरूलाई कार्यान्वयनको लागि लामबाट स्ट्याकमा धकेलिन्छ। यदि यस समयमा स्ट्याकमा कम्तिमा एउटा तत्व छ भने, त्यसपछि तिनीहरू स्ट्याकमा थप्न सकिँदैन। यो ठ्याक्कै यस कारणले गर्दा हो कि टाइमआउट द्वारा प्रकार्यहरू कल गर्दा प्रायः समयमा सटीक हुँदैन, किनकि यो भरिएको बेला प्रकार्य लामबाट स्ट्याकमा पुग्न सक्दैन।

निम्न उदाहरण हेरौं र यसको चरण-दर-चरण कार्यान्वयनको साथ सुरू गरौं। प्रणालीमा के हुन्छ हेरौं।

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) अझै केहि भइरहेको छैन। ब्राउजर कन्सोल स्पष्ट छ, कल स्ट्याक खाली छ।

2) त्यसपछि console.log('Hi') आदेश कल स्ट्याकमा थपिएको छ।

3) र यो पूरा हुन्छ

4) त्यसपछि console.log('Hi') कल स्ट्याकबाट हटाइन्छ।

५) अब सेटटाइमआउट(function cb5() {… }) कमाण्डमा जानुहोस्। यो कल स्ट्याकमा थपिएको छ।

6) setTimeout(function cb1() {… }) आदेश कार्यान्वयन गरिएको छ। ब्राउजरले टाइमर सिर्जना गर्दछ जुन वेब API को अंश हो। यसले काउन्टडाउन प्रदर्शन गर्नेछ।

7) setTimeout(function cb1() {... }) आदेशले आफ्नो काम पूरा गरेको छ र कल स्ट्याकबाट हटाइयो।

8) कमाण्ड console.log('Bye') कल स्ट्याकमा थपिएको छ।

9) console.log('Bye') आदेश कार्यान्वयन गरिएको छ।

10) आदेश console.log('Bye') कल स्ट्याकबाट हटाइयो।

11) कम्तिमा 5000 ms बितिइसकेपछि, टाइमर समाप्त हुन्छ र कलब्याक लाममा कलब्याक cb1 राख्छ।

12) घटना लुपले कलब्याक लामबाट प्रकार्य cb1 लिन्छ र यसलाई कल स्ट्याकमा राख्छ।

13) प्रकार्य cb1 कार्यान्वयन हुन्छ र कल स्ट्याकमा console.log('cb1') थप्छ।

14) console.log('cb1') आदेश कार्यान्वयन गरिएको छ।

15) आदेश console.log('cb1') कल स्ट्याकबाट हटाइयो।

16) प्रकार्य cb1 कल स्ट्याकबाट हटाइयो।

गतिशीलता मा एक उदाहरण हेरौं:

ठिक छ, हामीले जाभास्क्रिप्टमा एसिन्क्रोनी कसरी लागू हुन्छ भनेर हेर्यौं। अब एसिन्क्रोनस कोड को विकास को बारे मा संक्षिप्त कुरा गरौं।

एसिन्क्रोनस कोडको विकास।

a(function (resultsFromA) {
    b(resultsFromA, function (resultsFromB) {
        c(resultsFromB, function (resultsFromC) {
            d(resultsFromC, function (resultsFromD) {
                e(resultsFromD, function (resultsFromE) {
                    f(resultsFromE, function (resultsFromF) {
                        console.log(resultsFromF);
                    })
                })
            })
        })
    })
});

एसिन्क्रोनस प्रोग्रामिङलाई हामी जाभास्क्रिप्टमा थाहा भएअनुसार मात्र कार्यहरूद्वारा लागू गर्न सकिन्छ। तिनीहरू अन्य प्रकार्यहरूमा कुनै पनि अन्य चर जस्तै पारित गर्न सकिन्छ। यसरी कलब्याकहरू जन्मिए। र यो शान्त, रमाइलो र चंचल छ, जब सम्म यो उदासी, उदास र उदासीमा परिणत हुँदैन। किन? यो सरल छ:

कोडको जटिलता बढ्दै जाँदा, परियोजना द्रुत रूपमा अस्पष्ट, बारम्बार नेस्टेड ब्लकहरूमा परिणत हुन्छ - "कलब्याक नरक"।
त्रुटि ह्यान्डलिंग मिस गर्न सजिलो हुन सक्छ।
तपाईंले रिटर्नको साथ अभिव्यक्तिहरू फर्काउन सक्नुहुन्न।

प्रमिसको आगमनसँगै अवस्था अलिकति सुध्रियो ।

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('FAILED HERE');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('error: ', e);
});

प्रतिज्ञा चेनहरू देखा पर्यो, जसले कोड पढ्न योग्यतामा सुधार गर्यो
त्रुटिहरू समात्नको लागि छुट्टै विधि देखा पर्‍यो
Promise.all प्रयोग गरेर समानान्तर कार्यान्वयनको सम्भावना थपियो
हामी async/await प्रयोग गरेर नेस्टेड एसिन्क्रोनी समाधान गर्न सक्छौं

तर प्रतिज्ञाहरूको आफ्नै सीमाहरू छन्। उदाहरण को लागी, एक प्रतिज्ञा एक ट्याम्बोरिन संग नाच बिना रद्द गर्न सकिदैन, र सबैभन्दा महत्त्वपूर्ण के छ कि यो एक मूल्य संग काम गर्दछ।

ठिक छ, हामीले सहज रूपमा प्रतिक्रियाशील प्रोग्रामिङमा पुगेका छौं। थकित? खैर, सौभाग्य देखि, तपाईं केहि चिया बनाउन जान सक्नुहुन्छ, यसको बारेमा सोच्नुहोस् र थप पढ्न फर्कनुहोस्। र जारी राख्छु।

प्रतिक्रियात्मक प्रोग्रामिंग डाटा प्रवाह र परिवर्तन प्रसारमा केन्द्रित प्रोग्रामिङ प्रतिमान हो। डेटा स्ट्रिम भनेको के हो भनेर नजिकबाट हेरौं।

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

कल्पना गरौं कि हामीसँग इनपुट फिल्ड छ। हामी एरे सिर्जना गर्दैछौं र आगत घटनाको प्रत्येक कुञ्जीअपको लागि हामी घटनालाई हाम्रो एरेमा भण्डार गर्नेछौं। एकै समयमा, म नोट गर्न चाहन्छु कि हाम्रो एरे समय अनुसार क्रमबद्ध गरिएको छ, अर्थात्। पछिका घटनाहरूको अनुक्रमणिका अघिल्लो घटनाहरूको सूचकांक भन्दा ठूलो छ। यस्तो एरे डेटा प्रवाहको सरल मोडेल हो, तर यो अझै प्रवाह होइन। यस एर्रेलाई सुरक्षित रूपमा स्ट्रिम भनिन्छ, यसले कुनै न कुनै रूपमा ग्राहकहरूलाई सूचित गर्न सक्षम हुनुपर्दछ कि यसमा नयाँ डाटा आएको छ। यसरी हामी प्रवाहको परिभाषामा आउँछौं।

डाटा स्ट्रिम

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

फ्लो समय अनुसार क्रमबद्ध गरिएको डेटाको एर्रे हो जसले डेटा परिवर्तन भएको संकेत गर्न सक्छ। अब कल्पना गर्नुहोस् कि कोड लेख्न कत्तिको सुविधाजनक हुन्छ जसमा एउटा कार्यले कोडको विभिन्न भागहरूमा धेरै घटनाहरू कल गर्न आवश्यक हुन्छ। हामी केवल स्ट्रिमको सदस्यता लिन्छौं र परिवर्तनहरू हुँदा यसले हामीलाई सूचित गर्नेछ। र RxJs पुस्तकालयले यो गर्न सक्छ।

RxJS अवलोकन योग्य अनुक्रमहरू प्रयोग गरेर एसिन्क्रोनस र घटना-आधारित कार्यक्रमहरूसँग काम गर्ने पुस्तकालय हो। पुस्तकालयले आधारभूत प्रकार प्रदान गर्दछ अवलोकन योग्य, धेरै सहायक प्रकार (पर्यवेक्षक, अनुसूचक, विषय) र सङ्कलनहरू जस्तै घटनाहरूसँग काम गर्नका लागि अपरेटरहरू (नक्सा, फिल्टर, कम, हरेक र JavaScript Array बाट समान)।

यस पुस्तकालयको आधारभूत अवधारणाहरू बुझौं।

अवलोकन योग्य, पर्यवेक्षक, निर्माता

अवलोकनयोग्य पहिलो आधारभूत प्रकार हो जुन हामीले हेर्नेछौं। यो वर्गले RxJs कार्यान्वयनको मुख्य भाग समावेश गर्दछ। यो एक अवलोकनयोग्य स्ट्रिमसँग सम्बन्धित छ, जुन सदस्यता विधि प्रयोग गरेर सदस्यता लिन सकिन्छ।

अब्जर्भेबलले अपडेटहरू सिर्जना गर्न सहयोगी संयन्त्र लागू गर्दछ, तथाकथित अवलोकनकर्ताले। पर्यवेक्षकका लागि मानहरूको स्रोत भनिन्छ निर्माता। यो एक array, iterator, वेब सकेट, घटना को केहि प्रकार, आदि हुन सक्छ। त्यसैले हामी भन्न सक्छौं कि अब्जर्भेबल भनेको निर्माता र पर्यवेक्षक बीचको कन्डक्टर हो।

अवलोकनयोग्य तीन प्रकारका पर्यवेक्षक घटनाहरू ह्यान्डल गर्दछ:

अर्को - नयाँ डाटा
त्रुटि - यदि अनुक्रम अपवादको कारण समाप्त भयो भने त्रुटि। यो घटनाले क्रमको समाप्तिलाई पनि जनाउँछ।
पूरा - अनुक्रम को पूरा को बारे मा संकेत। यसको मतलब त्यहाँ कुनै नयाँ डाटा हुनेछैन।

डेमो हेरौं:

सुरुमा हामी मानहरू 1, 2, 3, र 1 सेकेन्ड पछि प्रक्रिया गर्नेछौं। हामीले 4 प्राप्त गर्नेछौं र हाम्रो स्ट्रिम समाप्त गर्नेछौं।

ठूलो स्वरमा सोच्दै

र त्यसपछि मैले महसुस गरें कि यसको बारेमा लेख्नु भन्दा बताउनु धेरै रोचक थियो। 😀

सदस्यता

जब हामी स्ट्रिमको सदस्यता लिन्छौं हामी नयाँ कक्षा सिर्जना गर्छौं सदस्यताजसले हामीलाई विधि प्रयोग गरेर सदस्यता रद्द गर्ने क्षमता दिन्छ सदस्यता रद्द गर्नुहोस्। हामी विधि प्रयोग गरेर समूह सदस्यताहरू पनि गर्न सक्छौं थप। ठिक छ, यो तार्किक छ कि हामी प्रयोग गरेर थ्रेडहरू अनसमूह गर्न सक्छौं हटाउन। थप्नुहोस् र हटाउने विधिहरूले इनपुटको रूपमा अर्को सदस्यता स्वीकार गर्दछ। म नोट गर्न चाहन्छु कि जब हामी सदस्यता रद्द गर्छौं, हामी सबै बाल सदस्यताहरूबाट सदस्यता रद्द गर्छौं मानौं तिनीहरूले सदस्यता रद्द गर्ने विधिलाई बोलाए। अघि बढ।

धारा को प्रकार

गरम
कल्ड

निर्माता अवलोकनयोग्य बाहिर सिर्जना गरिएको छ
निर्माता अवलोकन योग्य भित्र सिर्जना गरिएको छ

अवलोकनयोग्य सिर्जना गर्दा डाटा स्थानान्तरण गरिन्छ
डाटा सदस्यता को समयमा प्रदान गरिएको छ

सदस्यता रद्द गर्नका लागि थप तर्क चाहिन्छ
थ्रेड आफैं समाप्त हुन्छ

एक-देखि-धेरै सम्बन्ध प्रयोग गर्दछ
एक-देखि-एक सम्बन्ध प्रयोग गर्दछ

सबै सदस्यताहरूको एउटै अर्थ छ
सदस्यताहरू स्वतन्त्र छन्

यदि तपाइँसँग सदस्यता छैन भने डाटा हराउन सक्छ
नयाँ सदस्यताको लागि सबै स्ट्रिम मानहरू पुन: जारी गर्दछ

एक समानता दिन को लागी, म एक थिएटर मा एक चलचित्र को रूप मा एक तातो धारा को बारे मा सोच्दछु। तपाईं कुन समयमा आइपुग्नु भयो, त्यही क्षणबाट तपाईंले हेर्न थाल्नुभयो। म चिसो प्रवाहलाई टेकमा कलसँग तुलना गर्नेछु। समर्थन। कुनै पनि कलरले भ्वाइसमेल रेकर्डिङ सुरुदेखि अन्त्यसम्म सुन्छ, तर तपाईंले सदस्यता रद्द गरेर ह्याङ्ग अप गर्न सक्नुहुन्छ।

म नोट गर्न चाहन्छु कि त्यहाँ तथाकथित न्यानो प्रवाहहरू पनि छन् (मैले यो परिभाषा अत्यन्तै विरलै र विदेशी समुदायहरूमा मात्र भेटेको छु) - यो एक प्रवाह हो जुन चिसो प्रवाहबाट तातोमा रूपान्तरण हुन्छ। प्रश्न उठ्छ - कहाँ प्रयोग गर्ने)) म अभ्यासबाट उदाहरण दिनेछु।

म Angular संग काम गर्दैछु। उहाँले सक्रिय रूपमा rxjs प्रयोग गर्नुहुन्छ। सर्भरमा डाटा प्राप्त गर्न, म चिसो थ्रेडको अपेक्षा गर्छु र asyncPipe प्रयोग गरेर टेम्प्लेटमा यो थ्रेड प्रयोग गर्दछु। यदि मैले यो पाइप धेरै पटक प्रयोग गर्छु भने, त्यसपछि, चिसो स्ट्रिमको परिभाषामा फर्केर, प्रत्येक पाइपले सर्भरबाट डाटा अनुरोध गर्नेछ, जुन कम्तिमा भन्नु अनौठो छ। र यदि मैले चिसो धारालाई न्यानोमा रूपान्तरण गरें भने, अनुरोध एक पटक हुनेछ।

सामान्यतया, प्रवाहको प्रकार बुझ्न शुरुवातकर्ताहरूको लागि एकदम गाह्रो छ, तर महत्त्वपूर्ण छ।

अपरेटरहरू

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

अपरेटरहरूले हामीलाई स्ट्रिमहरूसँग काम गर्ने हाम्रो क्षमता विस्तार गर्ने क्षमता प्रदान गर्छन्। तिनीहरूले अब्जर्भेबलमा हुने घटनाहरू नियन्त्रण गर्न मद्दत गर्छन्। हामी सबैभन्दा लोकप्रिय एक जोडी हेर्नेछौं, र अपरेटरहरूको बारेमा थप विवरण उपयोगी जानकारीमा लिङ्कहरू प्रयोग गरेर फेला पार्न सकिन्छ।

अपरेटरहरू - को

को सहायक अपरेटर संग सुरु गरौं। यसले साधारण मानको आधारमा अवलोकनयोग्य बनाउँछ।

अपरेटरहरू - फिल्टर

फिल्टर अपरेटर, नामले सुझाव दिन्छ, स्ट्रिम संकेत फिल्टर गर्दछ। यदि अपरेटर सही फर्काउँछ भने, यो थप छोड्छ।

अपरेटरहरू - लिनुहोस्

take — emitters को संख्या को मान लिन्छ, जस पछि थ्रेड समाप्त हुन्छ।

अपरेटरहरू - debounceTime

debounceTime - उत्सर्जित मानहरू खारेज गर्दछ जुन आउटपुटहरू बीचको निर्दिष्ट समय अन्तराल भित्र पर्दछ - समय अन्तराल बितिसकेको पछि, अन्तिम मान उत्सर्जन गर्दछ।

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Испускаем значение раз в 1500мс
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Ожидаем 700мс значения прежде чем обработать
  take(3)
);

अपरेटरहरू - takeWhile

takeWhile गलत नआएसम्म मानहरू उत्सर्जन गर्दछ, त्यसपछि यसले थ्रेडबाट सदस्यता रद्द गर्छ।

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile( producer =>  producer < 5 )
);

अपरेटरहरू - नवीनतम संयोजन

CombineLatest अपरेटर केहि हदसम्म Promise.all सँग मिल्दोजुल्दो छ। यसले धेरै थ्रेडहरूलाई एकमा जोड्दछ। प्रत्येक थ्रेडले कम्तिमा एक उत्सर्जन गरेपछि, हामी एरेको रूपमा प्रत्येकबाट नवीनतम मानहरू प्राप्त गर्छौं। यसबाहेक, मर्ज गरिएका स्ट्रिमहरूबाट कुनै पनि उत्सर्जन पछि, यसले नयाँ मानहरू दिनेछ।

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750мс
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

अपरेटरहरू - zip

Zip - प्रत्येक थ्रेडबाट मानको लागि पर्खन्छ र यी मानहरूमा आधारित एरे बनाउँछ। यदि मान कुनै थ्रेडबाट आउँदैन भने, समूह बनाइने छैन।

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

अपरेटरहरू - forkJoin

forkJoin ले थ्रेडहरू पनि जोड्छ, तर सबै थ्रेडहरू पूरा भएपछि मात्र यसले मान उत्सर्जन गर्छ।

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

अपरेटरहरू - नक्सा

नक्सा रूपान्तरण अपरेटरले emitter मानलाई नयाँमा रूपान्तरण गर्छ।

const {  Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

अपरेटरहरू - साझा गर्नुहोस्, ट्याप गर्नुहोस्

ट्याप अपरेटरले तपाईंलाई साइड इफेक्टहरू गर्न अनुमति दिन्छ, त्यो हो, कुनै पनि कार्यहरू जसले अनुक्रमलाई असर गर्दैन।

शेयर उपयोगिता अपरेटरले चिसो प्रवाहलाई तातोमा परिणत गर्न सक्छ।

हामीले अपरेटरहरूसँग काम गरिसकेका छौं। विषयतिर जाऔं।

ठूलो स्वरमा सोच्दै

अनि म चिया पिउन गएँ । म यी उदाहरणहरूबाट थकित छु 😀

विषय परिवार

विषय परिवार तातो प्रवाह को एक प्रमुख उदाहरण हो। यी वर्गहरू एक प्रकारको हाइब्रिड हुन् जसले एकैसाथ अवलोकनयोग्य र पर्यवेक्षकको रूपमा कार्य गर्दछ। विषय तातो थ्रेड भएकोले, यसको सदस्यता रद्द गर्न आवश्यक छ। यदि हामी मुख्य विधिहरूको बारेमा कुरा गर्छौं, तब यी हुन्:

अर्को - स्ट्रिममा नयाँ डाटा स्थानान्तरण
त्रुटि - त्रुटि र थ्रेड समाप्ति
पूरा - थ्रेड को पूरा
सदस्यता लिनुहोस् - स्ट्रिमको सदस्यता लिनुहोस्
सदस्यता रद्द गर्नुहोस् - स्ट्रिमबाट सदस्यता रद्द गर्नुहोस्
asObservable - एक पर्यवेक्षक मा रूपान्तरण
प्रतिज्ञा - एक प्रतिज्ञा मा रूपान्तरण

त्यहाँ 4 5 प्रकारका विषयहरू छन्।

ठूलो स्वरमा सोच्दै

त्यहाँ 4 व्यक्तिहरू स्ट्रिममा कुरा गरिरहेका थिए, तर तिनीहरूले थप एक जना थपे। जसरी उनीहरू भन्छन्, बाँच्नुहोस् र सिक्नुहोस्।

सरल विषय new Subject()- विषयहरूको सरल प्रकार। प्यारामिटरहरू बिना सिर्जना गरियो। सदस्यता पछि मात्र प्राप्त मानहरू प्रसारण गर्दछ।

व्यवहार विषय new BehaviorSubject( defaultData<T> ) - मेरो विचारमा, विषयको सबैभन्दा सामान्य प्रकार। इनपुटले पूर्वनिर्धारित मान लिन्छ। सँधै अन्तिम अंकको डाटा बचत गर्दछ, जुन सदस्यता लिँदा प्रसारित हुन्छ। यो वर्गमा उपयोगी मान विधि पनि छ, जसले स्ट्रिमको हालको मान फर्काउँछ।

रिप्ले विषय new ReplaySubject(bufferSize?: number, windowTime?: number) - इनपुटले वैकल्पिक रूपमा मानहरूको बफरको आकारलाई पहिलो तर्कको रूपमा लिन सक्छ जुन यसले आफैमा भण्डार गर्नेछ, र दोस्रो समयको रूपमा जुन समयमा हामीलाई परिवर्तनहरू चाहिन्छ।

AsyncSubject new AsyncSubject() - सदस्यता लिँदा केही हुँदैन, र पूरा भएपछि मात्र मान फर्काइनेछ। स्ट्रिमको अन्तिम मान मात्र फर्काइनेछ।

WebSocket विषय new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - कागजात उनको बारेमा मौन छ र म उसलाई पहिलो पटक देख्दै छु। यदि कसैलाई थाहा छ उसले के गर्छ, कृपया लेख्नुहोस् र हामी यसलाई थप्नेछौं।

ओफ। ठिक छ, हामीले आज तपाईलाई भन्न चाहेका सबै कुरा कभर गरेका छौं। मलाई आशा छ कि यो जानकारी उपयोगी थियो। तपाईं उपयोगी जानकारी ट्याबमा सन्दर्भहरूको सूची आफै पढ्न सक्नुहुन्छ।

उपयोगी जानकारी

स्रोत: www.habr.com

जाभास्क्रिप्टमा एसिन्क्रोनस प्रोग्रामिङ (कलब्याक, वादा, RxJs)

एसिन्क्रोनस कोडको विकास।

डाटा स्ट्रिम

अवलोकन योग्य, पर्यवेक्षक, निर्माता

सदस्यता

धारा को प्रकार

अपरेटरहरू

विषय परिवार

उपयोगी जानकारी

एक टिप्पणी थप्न Отменить ответ