दोनों Promisesऔर Observablesहमें अमूर्तता प्रदान करते हैं जो हमारे अनुप्रयोगों की अतुल्यकालिक प्रकृति से निपटने में हमारी मदद करते हैं। उनके बीच का अंतर @ गुंटर और @ रेलू द्वारा स्पष्ट रूप से इंगित किया गया था।
चूंकि एक कोड स्निपेट एक हजार शब्दों के लायक है, उन्हें आसान समझने के लिए नीचे दिए गए उदाहरण के माध्यम से जाने दें।
धन्यवाद @Christoph Burgdorf भयानक लेख के लिए
कोणीय HTTP से निपटने के वादे के बजाय Rx.js वेधशाला का उपयोग करता है।
मान लीजिए कि आप एक खोज फ़ंक्शन का निर्माण कर रहे हैं, जो आपको लिखते ही आपको तुरंत परिणाम दिखाना चाहिए। ध्वनि परिचित है लेकिन उस कार्य के साथ बहुत सारी चुनौतियाँ हैं।
- जब भी उपयोगकर्ता किसी कुंजी को दबाता है, हम सर्वर के समापन बिंदु को हिट नहीं करना चाहते हैं, तो उन्हें
HTTPअनुरोधों के तूफान के साथ बाढ़ देना चाहिए । मूल रूप से, हम केवल इसे हिट करना चाहते हैं, जब उपयोगकर्ता ने प्रत्येक कीस्ट्रोक के साथ टाइप करना बंद कर दिया है।
- बाद के अनुरोधों के लिए खोज क्वेरी को समान क्वेरी पैरामेट्स से न जोड़ें ।
- आउट-ऑर्डर-ऑर्डर प्रतिक्रियाओं से निपटें। जब हमारे पास एक ही समय में कई अनुरोध होते हैं, तो हमें उन मामलों के लिए जिम्मेदार होना चाहिए जहां वे अप्रत्याशित क्रम में वापस आते हैं। कल्पना करें कि हम पहले कंप्यूटर टाइप करते हैं , रुकते हैं, एक अनुरोध निकलता है, हम कार टाइप करते हैं , रुकते हैं, एक अनुरोध निकलता है। अब हमारे पास उड़ान में दो अनुरोध हैं। दुर्भाग्य से, अनुरोध जो कंप्यूटर के लिए परिणामों को वहन करता है, उस अनुरोध के बाद वापस आता है जो कार के लिए परिणाम देता है ।
डेमो में बस दो फाइलें होंगी: 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]);
}
}
हम दिए गए खोज शब्द के साथ विकिपीडिया एपीआई के खिलाफ अनुरोध Jsonpकरने के लिए सेवा को इंजेक्ट कर रहे हैं । सूचना है कि हम फोन आदेश में एक से प्राप्त करने के लिए एक करने के लिए । आखिरकार हमारी खोज विधि के रिटर्न प्रकार के रूप में समाप्त होता है ।GETtoPromiseObservable<Response>Promise<Response>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इसके माध्यम से लूप कर सकें और हमारे लिए एक सूची तैयार कर सकें।
प्लंकर पर वादा आधारित कार्यान्वयन का उदाहरण देखें
जहां वेधशालाएं वास्तव में चमकती हैं
आइए प्रत्येक कोडस्ट्रोक के साथ समापन बिंदु को हथौड़ा न करने के लिए अपना कोड बदलें लेकिन इसके बजाय केवल एक अनुरोध भेजें जब उपयोगकर्ता ने 400 एमएस के लिए लिखना बंद कर दिया हो
ऐसी महाशक्तियों का अनावरण करने के लिए, हमें सबसे पहले एक Observable<string>खोज शब्द की आवश्यकता होती है, जो उपयोगकर्ता प्रकारों की खोज करता है। बजाय कीपर घटना के मैन्युअल रूप से बाध्य होने के कारण, हम कोणीय के 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"/>
हमारे घटक में, हम का एक उदाहरण बनाने FormControlसे @angular/formऔर हमारे घटक पर नाम अवधि के तहत एक क्षेत्र के रूप में यह बेनकाब।
पर्दे के पीछे, शब्द स्वचालित Observable<string>रूप से एक संपत्ति के रूप में उजागर करता है valueChangesजिसे हम सदस्यता ले सकते हैं। अब जब हमारे पास एक है Observable<string>, तो उपयोगकर्ता इनपुट पर काबू पाना debounceTime(400)हमारे लिए कॉल करने जितना आसान है Observable। यह एक नया रिटर्न 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));
}
}
यह एक खोज शब्द के लिए एक और अनुरोध भेजने के लिए संसाधनों की बर्बादी होगी जो हमारे ऐप पहले से ही परिणाम दिखाता है। वांछित व्यवहार को प्राप्त करने के लिए हमें बस इतना करना है कि हम कॉल करने के distinctUntilChangedबाद ऑपरेटर को कॉल करेंdebounceTime(400)
प्लंकर पर अवलोकन योग्य कार्यान्वयन का उदाहरण देखें
आदेश-प्रतिसाद प्रतिक्रियाओं से निपटने के लिए, कृपया पूरा लेख देखें http://blog.thoughtram.io/angular/2016/01/06/taking- नुकसान- of-observables-in-
angular2.html
जहां तक मैं एंगुलर में Http का उपयोग कर रहा हूं, मैं मानता हूं कि सामान्य उपयोग के मामलों में ऑब्जर्वेबल ओवर प्रॉमिस का उपयोग करते समय बहुत अंतर नहीं है। व्यवहार में यहां कोई भी लाभ वास्तव में प्रासंगिक नहीं है। आशा है कि मैं भविष्य में कुछ उन्नत उपयोग मामला देख सकता हूँ :)
और अधिक जानें
