angular - वादे और वेधशालाओं के बीच अंतर क्या है?




promise rxjs (16)

नीचे वादों और वेधशालाओं में कुछ महत्वपूर्ण अंतर हैं।

पक्का वादा

  • केवल एक मूल्य का उत्सर्जन करता है
  • रद्द करने योग्य नहीं
  • हिलाने योग्य नहीं
  • हमेशा अतुल्यकालिक

नमूदार

  • कई मूल्यों का उत्सर्जन करता है
  • केवल तभी बुलाया जाता है जब उसे बुलाया जाता है या कोई सदस्यता ले रहा होता है
  • रद्द किया जा सकता है
  • साझा किया जा सकता है और कई ग्राहकों द्वारा उस साझा मूल्य को सब्सक्राइब किया जा सकता है। और सभी ग्राहक एक ही समय में निष्पादित करेंगे।
  • संभवतः अतुल्यकालिक

बेहतर समझ के लिए https://stackblitz.com/edit/observable-vs-promises को https://stackblitz.com/edit/observable-vs-promises

क्या कोई कृपया Observable में Promise और Observable बीच अंतर बता सकता है?

प्रत्येक पर एक उदाहरण दोनों मामलों को समझने में मददगार होगा। किस परिदृश्य में हम प्रत्येक मामले का उपयोग कर सकते हैं?


वादे और वेधशाला दोनों हमें अतुल्यकालिक संचालन से निपटने में मदद करते हैं। जब इन अतुल्यकालिक ऑपरेशन किए जाते हैं तो वे कुछ कॉलबैक कह सकते हैं।

कोणीय वेधशालाओं का उपयोग करता है जो HTTP से निपटने के वादे के बजाय RxJS से है

Below are some important differences in promises & Observables.


वादा बनाम अवलोकन योग्य समानता पहले

  1. दोनों async कोड को संभालते थे।
  2. कृपया वादा उदाहरण के लिए देखें। प्रोमिस कंस्ट्रक्टर एक रिज़ॉल्यूशन रेफ़रेंस फंक्शन पास करता है, जो तब मिलता है जब इसे कुछ एसिंक्स टास्क पूरा होने पर कुछ वैल्यू के साथ बुलाया जाता है।
ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}
  1. अब देखने योग्य उदाहरण है। यहाँ हम एक समारोह भी पास करते हैं, अवलोकनीय कार्य को संभालने के लिए एक पर्यवेक्षक को। वादे में हल के विपरीत यह निम्न विधि है और तब के स्थान पर सदस्यता।

  2. तो दोनों async कार्य संभालता है। अब अंतर देखते हैं।

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

वादा बनाम अवलोकन योग्य अंतर

पक्का वादा

  1. यह एकल मूल्य को हल करता है या अस्वीकार करता है और एक बार में एक ही मूल्य के async कार्य को संभाल सकता है।
  2. एक बार एक वादा पूरा हो जाने के बाद, यह अब उपयोग नहीं किया जा सकता है और यहाँ यह कम हो जाता है।
  3. रद्द करने योग्य नहीं
  4. कोई rxjs ऑपरेटरों के लिए समर्थन नहीं करता है।

नमूदार

  1. कई अतुल्यकालिक मूल्यों का उत्सर्जन करने की क्षमता।
  2. घटनाओं या मूल्यों की धारा को संभालने के लिए उपयोग किया जाता है। विचार करें कि आपके पास कई कार्यों या मूल्यों की एक सरणी है, और आप चाहते हैं कि हर बार मूल्य इसमें डाला जाए, इसे स्वचालित रूप से नियंत्रित किया जाना चाहिए। जब भी आप इस सरणी में किसी मान को आगे बढ़ाते हैं, तो उसके सभी ग्राहक अपने आप नवीनतम मूल्य प्राप्त कर लेंगे।
  3. वेधशालाएँ इनपुट परिवर्तन, बार-बार अंतराल, सभी बाल घटकों के प्रसारण मूल्यों, वेब सॉकेट पुश सूचनाओं आदि के लिए उपयोगी हैं।
  4. किसी भी समय सदस्यता समाप्त विधि का उपयोग करके रद्द किया जा सकता है।
  5. एक और अंतिम अच्छा हिस्सा जो वादा करता है कि आरएक्सजे ऑपरेटरों के लिए समर्थन है। सब्सक्राइब करने से पहले अवलोकन योग्य डेटा को बदलने के लिए आपके पास कई पाइप ऑपरेटर प्रमुख रूप से मैप, फिल्टर, स्विचपाइप, कम्बाइनटेस्ट आदि हैं।


पक्का वादा:

  • भविष्य का एकल मूल्य प्रदान करें;
  • आलसी नहीं;
  • रद्द करने योग्य नहीं;

नमूदार:

  • समय के साथ कई मूल्यों का उत्सर्जन करता है;
  • आलसी;
  • रद्द करने योग्य;
  • मानचित्र, फ़िल्टर, कम करने और समान ऑपरेटरों का समर्थन करता है

यदि आप चाहें तो HTTP को Angular में कॉल करते समय वेधशालाओं के बजाय वादों का उपयोग कर सकते हैं।


इस विषय पर पहले से ही बहुत सारे उत्तर हैं इसलिए मैं एक अतिरेक नहीं जोड़ूंगा।

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

केवल इसलिए कि कोणीय ढांचा और यह समुदाय सभी ऑब्जर्वेबल का उपयोग कर रहे हैं। इसलिए यह फायदेमंद होगा जब आप फ्रेमवर्क सेवाओं या तीसरे पक्ष के मॉड्यूल को एकीकृत करते हैं और सब कुछ एक साथ जोड़ते हैं।

हालांकि मैं सभी डाउनवोट की सराहना करता हूं लेकिन मैं अभी भी ऊपर अपनी राय रखता हूं जब तक कि कोई व्यक्ति कुछ परिदृश्यों को सूचीबद्ध करने के लिए एक उचित टिप्पणी नहीं करता है जो अभी भी ऑब्जर्वल्स पर प्रॉमिस का उपयोग करने के लिए आपके कोणीय प्रोजेक्ट में उपयोगी हो सकते हैं।

बेशक, सभी मामलों में कोई राय 100% सही नहीं है, लेकिन कम से कम मुझे लगता है कि नियमित वाणिज्यिक परियोजनाओं के लिए 98% समय कोणीय ढांचे में लागू किया गया है, ऑब्जर्वेबल जाने का सही तरीका है।

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

उन घटकों में शामिल हैं, लेकिन यह सीमित नहीं हैं: HttpClient, फॉर्म बिल्डर, कोणीय सामग्री मॉड्यूल / संवाद, Ngrx स्टोर / प्रभाव और एनजीएक्स-बूटस्ट्रैप।

वास्तव में, पिछले 2 वर्षों में से निपटने वाले एकमात्र पर्यावरणीय प्रणाली से एकमात्र वादा है APP_INITIALIZER


जबकि स्वीकृत उत्तर सामान्य रूप से अच्छा है, मुझे नहीं लगता कि यह जोर देता है कि जब कोणीय घटकों के साथ काम करते हैं तो आप लगभग हमेशा एक अवलोकन का उपयोग करना चाहते हैं क्योंकि यह रद्द करने का समर्थन करता है। वादे को रद्द नहीं किया जा सकता है और भले ही आपका घटक नष्ट हो जाए। कोणीय तब तक क्षमा करने की प्रवृत्ति रखता है जब तक कि वह नहीं।

उदाहरण के लिए किसी नष्ट हुए घटक पर किसी भी मैनुअल परिवर्तन का पता लगाना अपवाद का कारण होगा:

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()

यदि वादे के हल होने से पहले आपका घटक नष्ट हो जाता है, तो वादा पूरा होने पर आपको एक attempt to use destroyed view त्रुटि मिलेगी ।

वैकल्पिक रूप से, यदि आप takeUntil पैटर्न के साथ takeUntil उपयोग करते हैं , तो जैसे ही आपका घटक नष्ट हो जाएगा, सदस्यता रद्द हो जाएगी।

यह एक आकस्मिक उदाहरण का एक सा है, लेकिन नष्ट कर दिया गया है कि एक घटक के लिए कोड निष्पादित शायद कीड़े के लिए नेतृत्व करने के लिए जा रहा है। जब तक आप वास्तव में किसी कारण से ऐसा नहीं करना चाहते हैं: पी


मैं इस तर्क का उपयोग करने वाले बहुत से लोगों को देखता हूं कि ऑब्जर्वेबल "रद्द करने योग्य" हैं, लेकिन यह वादा "रद्द" करने के बजाय तुच्छ है।

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));


वेधशाला और वादे हमें जावास्क्रिप्ट / टाइपस्क्रिप्ट में अतुल्यकालिक कार्यात्मकताओं के साथ काम करने में मदद कर रहे हैं। वे कई मामलों में बहुत समान हैं, हालांकि, उनके बीच अभी भी कुछ मतभेद हैं।


दोनों वादे और वेधशालाएँ हमें जावास्क्रिप्ट में अतुल्यकालिक कार्यात्मकताओं के साथ काम करने में मदद करेंगे। वे कई मामलों में बहुत समान हैं, हालांकि, दोनों के बीच अभी भी कुछ अंतर हैं, वादे ऐसे मान हैं जो एसटीईएन कॉल जैसे asynchronous तरीकों से हल करेंगे। दूसरी ओर, वेधशालाएँ अतुल्यकालिक घटनाओं के अनुक्रम से निपटती हैं । उनके बीच मुख्य अंतर नीचे सूचीबद्ध हैं:

पक्का वादा:

  • एक पाइपलाइन होना
  • आमतौर पर केवल async डेटा रिटर्न के साथ उपयोग करते हैं
  • रद्द करना आसान नहीं है

नमूदार:

  • रद्द करने योग्य हैं
  • प्रकृति द्वारा पुनः धारण करने योग्य हैं जैसे कि पुनः प्रयास और पुनः प्रयास करें
  • कई पाइपलाइनों में डेटा स्ट्रीम करें
  • नक्शा, फिल्टर आदि जैसे सरणी-जैसा संचालन करना
  • घटनाओं जैसे अन्य स्रोतों से बनाया जा सकता है
  • वे कार्य हैं, जिन्हें बाद में सब्सक्राइब किया जा सकता है

इसके अलावा, मैंने अंतर दिखाने के लिए आपके लिए नीचे दी गई चित्रमय छवि बनाई है:


भले ही यह उत्तर देर से आया हो, मैंने नीचे दिए मतभेदों को संक्षेप में प्रस्तुत किया है,

नमूदार:

  1. अवलोकनीय केवल एक function जो an observer लेता है और एक function Observer: an object with next, error. देता है function Observer: an object with next, error.
  2. पर्यवेक्षक अपनी डेटा स्ट्रीम को subscribe/unsubscribe करने की अनुमति देता है, पर्यवेक्षक के लिए अगला मूल्य उत्सर्जित करता है, पर्यवेक्षक को errors बारे में सूचित करता है और पर्यवेक्षक को stream completion बारे में सूचित करता है।
  3. प्रेक्षक function to handle next value , त्रुटियों और धारा के अंत (ui घटनाओं, http प्रतिक्रियाओं, वेब सॉकेट्स के साथ डेटा) function to handle next value एक function to handle next value प्रदान करता है।
  4. समय के साथ multiple values साथ काम करता है
  5. यह cancel-able/retry-able और map,filter,reduce आदि जैसे ऑपरेटरों का समर्थन करता है।
  6. एक ऑब्जर्वेबल बनाना हो सकता है - Observable.create() - ऑब्जर्वेबल को रिटर्न करता है जो ऑन - Observer Observable.from() पर तरीकों को इनवोक कर सकता है - एक एरे या कंवर्टेबल को कंवर्ट करता है - Observable Observable.fromEvent() - ऑब्जर्वेबल - Observable.fromPromise() में किसी इवेंट को Observable.fromPromise() - एक प्रॉमिस को ऑब्जर्वेबल में बदलता है - Observable.range() - Observable.range() में एडजर्स का एक सीक्वेंस लौटाता है a एड रेंज

वादा :

  1. एक वादा एक कार्य का प्रतिनिधित्व करता है जो भविष्य में समाप्त होगा;

  2. वादे resolved by a value हो जाते हैं;

  3. वादे अपवादों से खारिज हो जाते हैं;

  4. cancellable नहीं है और यह a single value लौटाता a single value

  5. एक वादा एक समारोह का खुलासा (then)

    -तब एक नया promise वापस promise ;

    state आधार पर उस की attachment के लिए सभी को निष्पादित किया जाएगा;

    - handlers order attached में निष्पादित करने की guaranteed है;


मैंने सिर्फ एक ऐसे मुद्दे से निपटा है जहाँ वादे सबसे अच्छा समाधान थे, और मैं इसे यहाँ किसी के लिए साझा कर रहा हूँ इस घटना में यह सवाल उपयोगी है (यह ठीक वही जवाब था जो मैं पहले देख रहा था):

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

सभी ड्रॉपडाउन मेनू वेरिएबल्स को सफलतापूर्वक पॉप्युलेट करने का एकमात्र तरीका सेवा को इस तरह से कॉल करना था जो एक नए अनुरोध को अंतिम अनुरोध पूरा होने तक संसाधित होने से रोकता था, और प्रोमिस / .then तंत्र ने समस्या को अच्छी तरह से हल किया।

  fetchValueList(listCode): Promise<any> {
      return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode)
          .map(response => response.json())
          .toPromise();
  }

  initializeDropDowns() {
      this.fetchValueList('First-Val-List')
          .then(data => {
              this.firstValList = data;
              return this.fetchValueList('Second-Val-List')
          }).then(data => {
              this.secondValList = data;
              return this.fetchValueList('Third-Val-List')
          }).then(data => {
              this.thirdValList = data;
          })  }

मैंने घटक में कार्यों को परिभाषित किया, और फिर ngOnInit में initializeDropDowns () कहा।

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

सभी चरों को पॉप्युलेट करने के लिए हम इसे कई बार श्रृंखलाबद्ध कर सकते हैं, और अंतिम कोड ब्लॉक पर हम केवल रिटर्न स्टेटमेंट को छोड़ देते हैं और ब्लॉक को समाप्त कर देते हैं।

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


वादा - एकल भविष्य का मूल्य प्रदान करें। आलसी नहीं । रद्द-सक्षम नहीं। यह या तो अस्वीकार या हल होगा।

अवलोकनीय - भविष्य के कई मूल्य प्रदान करें। आलसी । रद्द करने में सक्षम। यह अन्य तरीकों को लाइव मैप, फिल्टर, कम प्रदान करता है।


Promises और Observables हमें उन अमूर्तताओं के साथ प्रदान करते हैं जो हमें हमारे अनुप्रयोगों की अतुल्यकालिक प्रकृति से निपटने में मदद करते हैं। उनके बीच का अंतर @ गुंटर और @ रेलू द्वारा स्पष्ट रूप से इंगित किया गया था।

चूंकि एक कोड स्निपेट एक हजार शब्दों के लायक है, उन्हें आसान समझने के लिए नीचे दिए गए उदाहरण के माध्यम से जाने दें।

धन्यवाद @Christoph Burgdorf भयानक article

कोणीय HTTP से निपटने के वादे के बजाय Rx.js वेधशाला का उपयोग करता है।

मान लीजिए कि आप एक खोज फ़ंक्शन का निर्माण कर रहे हैं, जो आपको लिखते ही आपको तुरंत परिणाम दिखाना चाहिए। ध्वनि परिचित है लेकिन उस कार्य के साथ बहुत सारी चुनौतियाँ हैं।

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

डेमो में बस दो फाइलें app.ts : app.ts और wikipedia-service.ts । एक वास्तविक दुनिया के परिदृश्य में, हम सबसे अधिक संभावना है कि चीजों को आगे विभाजित करेंगे, हालांकि।

नीचे वादा-आधारित कार्यान्वयन है जो वर्णित किनारे के मामलों में से किसी को भी संभाल नहीं करता है।

wikipedia-service.ts

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}

हम दिए गए खोज शब्द के साथ विकिपीडिया एपीआई के खिलाफ GET अनुरोध करने के लिए Jsonp सेवा को इंजेक्ट कर रहे हैं। ध्यान दें कि हम toPromise Observable<Response> से एक Promise<Response> तक प्राप्त करने के लिए कॉल toPromise । अंततः हमारी खोज विधि के वापसी प्रकार के रूप में एक Promise<Array<string>> साथ समाप्त होता है।

app.ts

// check the plnkr for the full list of imports
import {...} from '...';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wikipedia Search</h2>
      <input #term type="text" (keyup)="search(term.value)">
      <ul>
        <li *ngFor="let item of items">{{item}}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items: Array<string>;

  constructor(private wikipediaService: WikipediaService) {}

  search(term) {
    this.wikipediaService.search(term)
                         .then(items => this.items = items);
  }
}

यहाँ बहुत आश्चर्य की बात नहीं है। हम अपने WikipediaService इंजेक्ट करते हैं और इसे खोज विधि के माध्यम से कार्यक्षमता को उजागर करते हैं। टेम्पलेट बस कीप को बांधता है और search(term.value) कहता है।

हम वादे के नतीजे को उजागर करते हैं कि विकिपीडिया सेवा की खोज पद्धति वापस लौटती है और इसे टेम्पलेट के एक सरल एरे के रूप में उजागर करती है ताकि हमारे पास इसके माध्यम से *ngFor लूप हो सके और हमारे लिए एक सूची बन सके।

Plunker पर वादा आधारित कार्यान्वयन का उदाहरण देखें

जहां वेधशालाएं वास्तव में चमकती हैं

आइए प्रत्येक कोडस्ट्रोक के साथ समापन बिंदु को हथौड़ा न करने के लिए अपना कोड बदलें लेकिन इसके बजाय केवल एक अनुरोध भेजें जब उपयोगकर्ता ने 400 एमएस के लिए लिखना बंद कर दिया हो

ऐसी महाशक्तियों का अनावरण करने के लिए, हमें सबसे पहले एक Observable<string> प्राप्त करने की आवश्यकता है जो खोज शब्द को लेती है जिसमें उपयोगकर्ता टाइप करता है। बजाय की-अप इवेंट के मैन्युअल रूप से बाइंड करने के लिए, हम Angular के formControl निर्देश का लाभ उठा सकते हैं। इस निर्देश का उपयोग करने के लिए, हमें सबसे पहले ReactiveFormsModule को अपने एप्लिकेशन मॉड्यूल में आयात करना होगा।

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

एक बार आयात होने के बाद, हम अपने टेम्पलेट के भीतर से फॉर्मकंट्रोल का उपयोग कर सकते हैं और इसे "टर्म" नाम पर सेट कर सकते हैं।

<input type="text" [formControl]="term"/>

हमारे घटक में, हम @angular/form से FormControl का एक उदाहरण @angular/form और इसे हमारे घटक के नाम के तहत एक क्षेत्र के रूप में उजागर करते हैं।

पर्दे के पीछे, शब्द स्वचालित रूप से एक valueChanges Observable<string> संपत्ति valueChanges को उजागर करता है जो हम सदस्यता ले सकते हैं। अब जब हमारे पास एक Observable<string> , तो यूजर इनपुट पर काबू पाना उतना ही आसान है जितना कि हमारे Observable पर debounceTime(400) को कॉल करना। यह एक नया Observable<string> वापस लौटाएगा जो केवल एक नए मूल्य का उत्सर्जन करेगा जब 400ms के लिए नए मान नहीं आ रहे हैं।

export class App {
  items: Array<string>;
  term = new FormControl();
  constructor(private wikipediaService: WikipediaService) {
    this.term.valueChanges
              .debounceTime(400)        // wait for 400ms pause in events
              .distinctUntilChanged()   // ignore if next search term is same as previous
              .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
  }
}

खोज शब्द के लिए एक और अनुरोध भेजने के लिए संसाधनों की बर्बादी होगी जो हमारे ऐप पहले से ही परिणाम दिखाता है। हम सभी को वांछित व्यवहार को प्राप्त करने के लिए करना है, जिसे हमने debounceTime(400) कहा जाता है

Plunker पर Plunker योग्य कार्यान्वयन का उदाहरण देखें

आदेश-प्रतिसाद प्रतिक्रियाओं से निपटने के लिए, कृपया पूरा लेख देखें article of-observables-in- article

जहां तक ​​मैं एंगुलर में Http का उपयोग कर रहा हूं, मैं मानता हूं कि सामान्य उपयोग के मामलों में ऑब्जर्वेबल ओवर प्रॉमिस का उपयोग करते समय बहुत अंतर नहीं है। व्यवहार में यहां कोई भी लाभ वास्तव में प्रासंगिक नहीं है। आशा है कि मैं भविष्य में कुछ उन्नत उपयोग मामला देख सकता हूँ :)

और अधिक जानें


पक्का वादा:

एक Async इवेंट हैंडलर - वादा वस्तु एक अतुल्यकालिक ऑपरेशन के अंतिम समापन (या विफलता) का प्रतिनिधित्व करती है, और इसके परिणामस्वरूप मूल्य।

सिंटैक्स: नया वादा (निष्पादक);

उदाहरण के लिए:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

प्रॉमिस के बारे में: इसकी एक पाइपलाइन है, इसलिए यह केवल एक बार मूल्यों को लौटाएगा जब इसे बुलाया जाएगा। इसके एक तरह से हैंडलर को एक बार कॉल करने पर आप रद्द नहीं कर सकते। उपयोगी सिंटैक्स आप तब खेल सकते हैं, जब () और फिर ()

observables:

वेधशालाएँ समय के साथ कई मूल्यों के आलसी संग्रह हैं। यह वास्तव में async संचालन के लिए एक महान दृष्टिकोण है। यह rxjs साथ किया जा सकता है जिसमें क्रॉस प्लेटफॉर्म समर्थन है जो कोणीय / प्रतिक्रिया आदि के साथ उपयोग कर सकता है।

स्ट्रीम लाइनर की तरह इसका कार्य। मल्टी पाइप लाइन हो सकती है। इसलिए एक बार परिभाषित करने के बाद आप कई स्थानों पर रिटर्न परिणाम प्राप्त करने के लिए सदस्यता ले सकते हैं।

सिंटेक्स: import * as Rx from "@reactivex/rxjs"; इनिट:

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

आदि

सदस्य बनना: RxLogger.getInstance();

उदाहरण के लिए:

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

चूंकि यह बहु पाइपलाइन का समर्थन करता है इसलिए आप विभिन्न स्थानों में परिणाम की सदस्यता ले सकते हैं, इसमें वादों की तुलना में बहुत अधिक संभावनाएं हैं।

उपयोग: इसमें अधिक संभावनाएं हैं map, filter, pipe, map, concatMap etc


पक्का वादा

एक Promise एक एकल घटना संभालती है जब एक async आपरेशन पूरा या विफल रहता है।

नोट: Promise लाइब्रेरी वहाँ हैं जो रद्द करने का समर्थन करती हैं, लेकिन ES6 Promise अब तक नहीं हुआ है।

नमूदार

एक Observable एक Stream तरह है (कई भाषाओं में) और शून्य या अधिक घटनाओं को पारित करने की अनुमति देता है जहां कॉलबैक को प्रत्येक घटना के लिए कहा जाता है।

अक्सर Observable को Promise पर अधिक पसंद किया जाता है क्योंकि यह Promise और अधिक की सुविधाएँ प्रदान करता है। यदि आप 0, 1, या कई ईवेंट को हैंडल करना चाहते हैं, तो Observable साथ यह कोई फर्क नहीं पड़ता। आप प्रत्येक मामले में एक ही एपीआई का उपयोग कर सकते हैं।

Observable को कैंसिल करने के लिए Promise पर भी फायदा है। यदि किसी सर्वर या किसी अन्य महंगे async ऑपरेशन में HTTP रिक्वेस्ट के परिणाम की आवश्यकता नहीं है, तो एक Observable के सब्सक्रिप्शन को सदस्यता रद्द करने की अनुमति देता है, जबकि एक Promise अंततः सफलता या असफल कॉलबैक को कॉल करेगा, जब आप नहीं भी करते हैं अधिसूचना की आवश्यकता है या परिणाम यह अब प्रदान करता है।

अवलोकन reduce को एक सरणी के समान map , forEach , reduce , ... जैसे ऑपरेटर प्रदान करते हैं

retry() , या replay() , ... जैसे शक्तिशाली ऑपरेटर भी हैं ... जो अक्सर काफी काम आते हैं।


वादे

  1. परिभाषा: आपको एसिंक्रोनस रूप से फ़ंक्शन चलाने में मदद करता है, और उनके रिटर्न मान (या अपवाद) का उपयोग करता है लेकिन केवल एक बार निष्पादित होने पर।
  2. आलसी नहीं
  3. रद्द करने योग्य नहीं (कैंसिलेशन का समर्थन करने वाले प्रोमिस लाइब्रेरी हैं, लेकिन ES6 प्रॉमिस अब तक नहीं हुआ है)। दो संभावित निर्णय हैं
    • अस्वीकार
    • संकल्प
  4. वापस नहीं लिया जा सकता (वादे के पास मूल फ़ंक्शन तक पहुंच होनी चाहिए, जो एक रिट्री क्षमता रखने का वादा वापस कर दिया है, जो एक बुरा काम है)

observables

  1. परिभाषा: आपको एसिंक्रोनस रूप से फ़ंक्शंस चलाने में मदद करता है, और निष्पादित होने पर एक निरंतर अनुक्रम ( कई बार ) में उनके रिटर्न मान का उपयोग करता है।
  2. डिफ़ॉल्ट रूप से, यह आलसी है क्योंकि यह समय बढ़ने पर मूल्यों का उत्सर्जन करता है।
  3. बहुत सारे ऑपरेटर हैं जो कोडिंग के प्रयास को सरल बनाते हैं।
  4. एक ऑपरेटर रिट्री का उपयोग जब भी जरूरत हो रिट्रीट करने के लिए किया जा सकता है, भले ही हमें कुछ शर्तों के आधार पर ऑब्जर्वेबल को फिर से रिट्रीव करने की आवश्यकता हो, फिर से उपयोग किया जा सकता है।

    नोट : उनके इंटरएक्टिव आरेखों के साथ ऑपरेटरों की एक सूची यहां RxMarbles.com पर उपलब्ध है







angular-observable