දෙකම Promisesසහ අපගේ යෙදුම්වල අසමමුහුර්ත ස්වභාවය Observablesසමඟ කටයුතු කිරීමට අපට උපකාරී වන සාරාංශ ලබා දේ . ඔවුන් අතර වෙනස පැහැදිලිව පෙන්වා දුන්නේ @ ගුන්ටර් සහ el රේලු විසිනි.
කේත ස්නිපටයක් වචන දහසක් වටින බැවින් ඒවා පහසුවෙන් තේරුම් ගැනීමට පහත උදාහරණය හරහා යන්න.
පුදුමාකාර ලිපියට ක්‍රිස්ටෝෆ් බර්ග්ඩෝෆ්ට ස්තූතියි
HTTP සමඟ ගනුදෙනු කිරීම සඳහා පොරොන්දු වෙනුවට කෝණික Rx.js නිරීක්ෂණ භාවිතා කරයි.
ඔබ ටයිප් කරන විට ප්‍රති results ල ක්ෂණිකව පෙන්විය යුතු සෙවුම් ශ්‍රිතයක් ඔබ ගොඩනඟයි යැයි සිතමු . හුරුපුරුදු බව පෙනේ, නමුත් එම කර්තව්‍යය සමඟ එන අභියෝග රාශියක් ඇත.
- පරිශීලකයා යතුරක් එබූ සෑම අවස්ථාවකම සේවාදායකයේ අවසාන ස්ථානයට පහර දීමට අපට අවශ්ය නැත, එය
HTTPඉල්ලීම් කුණාටුවකින් ඔවුන්ව ගංවතුරට ලක් කළ යුතුය . මූලික වශයෙන්, අපට එය පහර දීමට අවශ්ය වන්නේ පරිශීලකයා සෑම යතුරු පැදියක් වෙනුවට ටයිප් කිරීම නැවැත්වූ පසු පමණි.
- පසුකාලීන ඉල්ලීම් සඳහා එකම විමසුම් පරාමිතීන් සමඟ සෙවුම් අන්ත ලක්ෂ්‍යයට පහර නොදෙන්න .
- යල්පැනගිය ප්‍රතිචාර සමඟ කටයුතු කරන්න. අපට එකවර ගුවන් ගමන් වලදී විවිධ ඉල්ලීම් ඇති විට, ඒවා අනපේක්ෂිත පිළිවෙලට නැවත පැමිණෙන අවස්ථා සඳහා අප ගණන් දිය යුතුය. අපි මුලින්ම පරිගණකය ටයිප් කරන්න , නවත්වන්න, ඉල්ලීමක් එළියට යයි, අපි කාර් ටයිප් කරන්නෙමු , නවත්වන්න, ඉල්ලීමක් පිටතට යයි සිතන්න. දැන් අපට ගුවන් ගමන් සඳහා ඉල්ලීම් දෙකක් තිබේ. අවාසනාවකට මෙන්, පරිගණකය සඳහා ප්‍රති results ල රැගෙන යන ඉල්ලීම මෝටර් රථ සඳහා ප්‍රති results ල රැගෙන යන ඉල්ලීමෙන් පසුව නැවත පැමිණේ .
නිරූපණය හුදෙක් ගොනු දෙකකින් සමන්විත වේ: 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]);
}
}
ලබා දී ඇති සෙවුම් පදයක් සමඟ විකිපීඩියා API ට එරෙහිව ඉල්ලීමක් Jsonpකිරීමට අපි සේවාව එන්නත් කරමු . A සිට a දක්වා ලබා ගැනීම සඳහා අප අමතන බව සැලකිල්ලට ගන්න . අවසානයේදී අපගේ සෙවුම් ක්‍රමයේ නැවත පැමිණීමේ වර්ගය ලෙස අවසන් වේ.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).
විකිපීඩියා සේවයේ සෙවුම් ක්රමය නැවත පැමිණෙන බවට පොරොන්දුවේ ප්‍රති result ලය අපි ලිහා, එය සරල නූල් පෙළක් ලෙස අච්චුවට නිරාවරණය කර ඇති අතර එමඟින් අපට *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 {}
ආනයනය කළ පසු, අපට අපගේ අච්චුව තුළ සිටම formControl භාවිතා කර එය "පදය" යන නමට සැකසිය හැකිය.
<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));
}
}
අපගේ යෙදුම දැනටමත් ප්‍රති results ල පෙන්වන සෙවුම් යෙදුමක් සඳහා තවත් ඉල්ලීමක් යැවීම සම්පත් නාස්තියකි. අපේක්ෂිත හැසිරීම සාක්ෂාත් කර ගැනීම සඳහා distinctUntilChangedඅප කළ යුත්තේ අප ඇමතූ වහාම ක්‍රියාකරු අමතන්නdebounceTime(400)
ආදර්ශය බලන්න නිරීක්ෂණය මත ක්රියාත්මක Plunker
යල්පැනගිය ප්‍රතිචාර සමඟ කටයුතු කිරීම සඳහා කරුණාකර සම්පූර්ණ ලිපිය http://blog.whattram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html පරීක්ෂා කරන්න.
මම කෝණික භාෂාවෙන් Http භාවිතා කරන තාක් දුරට, සාමාන්‍ය භාවිත අවස්ථා වලදී නිරීක්ෂණය කළ හැකි පොරොන්දුව භාවිතා කිරීමේදී විශාල වෙනසක් නොමැති බව මම එකඟ වෙමි. මෙහි කිසිදු වාසියක් ප්‍රායෝගිකව අදාළ නොවේ. අනාගතයේදී මට සමහර උසස් භාවිත අවස්ථා දැක ගත හැකි යැයි සිතමි :)
වැඩිදුර ඉගෙන ගන්න
