উভয়ই Promisesএবং Observablesআমাদের বিমূর্ততা সরবরাহ করে যা আমাদের অ্যাপ্লিকেশনগুলির অ্যাসিনক্রোনাস প্রকৃতির মোকাবেলায় সহায়তা করে । তাদের মধ্যে পার্থক্যটি পরিষ্কার করা হয়েছে @ জন্টার এবং @ রেলু দ্বারা।
যেহেতু একটি কোড স্নিপেট এক হাজার শব্দের মূল্যবান, তাই এগুলি আরও সহজে বোঝার জন্য নীচের উদাহরণটি দিয়ে যান।
অসাধারণ নিবন্ধের জন্য @ ক্রিসটফ বার্গডর্ফকে ধন্যবাদ
কৌণিক এইচটিটিপি নিয়ে কাজ করার প্রতিশ্রুতির পরিবর্তে আরএক্স.জেস অবজারভেবল ব্যবহার করে।
মনে করুন যে আপনি একটি অনুসন্ধান ফাংশন তৈরি করছেন যা আপনার টাইপ করার সাথে সাথে আপনাকে ফলাফলগুলি প্রদর্শন করবে। পরিচিত মনে হচ্ছে তবে সেই কাজটি নিয়ে প্রচুর চ্যালেঞ্জ রয়েছে।
- আমরা যতবারই কোনও কী চাপলে সার্ভারের শেষ পয়েন্টটি আঘাত করতে চাই না, এটির
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একটি GETঅনুরোধ করার জন্য পরিষেবাটি ইনজেকশন দিচ্ছি । লক্ষ করুন যে, আমরা কল অর্ডারে একটি থেকে পেতে একটি থেকে । শেষ পর্যন্ত আমাদের অনুসন্ধান পদ্ধতির রিটার্ন টাইপ হিসাবে শেষ করুন ।toPromiseObservable<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এটির মধ্য দিয়ে লুপ পেতে পারি এবং আমাদের জন্য একটি তালিকা তৈরি করতে পারি।
প্লামকারে প্রতিশ্রুতি ভিত্তিক বাস্তবায়নের উদাহরণ দেখুন
যেখানে পর্যবেক্ষণগুলি সত্যই জ্বলজ্বল করে
আসুন প্রতিটি কোডস্ট্রোক দিয়ে শেষ পয়েন্টটি হাতুড়ি না করে আমাদের কোডটি পরিবর্তন করুন তবে ব্যবহারকারী কেবল ৪০০ এমএসের জন্য টাইপ করা বন্ধ করলে কেবল একটি অনুরোধ প্রেরণ করুন
এ জাতীয় সুপার পাওয়ার উন্মোচন করতে আমাদের প্রথমে এমন একটি 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>দেবে যা কেবলমাত্র 400 মাইলের জন্য নতুন মান না আসায় একটি নতুন মান নির্গত হয়।
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-advantage-of-observables-in-angular2.html
অ্যাংুলারে আমি যতদূর এইচটিটিপি ব্যবহার করছি, আমি সম্মত হলাম যে সাধারণ ব্যবহারের ক্ষেত্রে ওভারসামেভার ওভার প্রতিশ্রুতি দেওয়ার সময় খুব বেশি পার্থক্য নেই। সুবিধার কোনওটিই এখানে বাস্তবে প্রাসঙ্গিক নয়। আশা করি ভবিষ্যতে কিছু উন্নত ব্যবহারের ঘটনাটি দেখতে পাবো :)
আরও জানুন
