どちらPromisesとObservables助け、私たちが対処することを抽象化を提供してくれる非同期当社のアプリケーションの性質。それらの違いは@Günterと@Reluによって明確に指摘されました。
コードスニペットは1000語に相当するので、以下の例を理解して理解しやすくしてください。
素晴らしいものを@Christoph Burgdorfに感謝 記事
Angularは、HTTPを扱うための約束の代わりにRx.js Observablesを使用します。
あなたが構築していると仮定します 入力中に結果を即座に表示検索機能を。おなじみのようですが、その作業には多くの課題があります。
- ユーザーがキーを押すたびにサーバーエンドポイントをヒットするのは望ましくありません。
HTTPリクエストでます。基本的に、ユーザーがキーストロークごとではなく、ユーザーが入力を停止したときにのみヒットさせたいと考えています。
- で検索エンドポイントをヒットしないでください 後続のリクエスト同じクエリパラメータで。
- 順不同の応答に対処します。処理中の複数のリクエストが同時にある場合、予期しない順序で返されるケースを考慮する必要があります。最初にcomputerと入力して、停止するとリクエストが送信され、carと入力して停止すると、リクエストが送信されると想像してください。これで、2つのリクエストが処理中です。残念ながら、コンピューターの結果を含むリクエストは、車の結果を含むリクエストの後に返されます。
デモは単純に2つのファイルで構成されます：app.tsとwikipedia-service.ts。ただし、実際のシナリオでは、おそらくさらに分割します。
以下は、説明されているエッジケースを処理しないPromiseベースの実装です。
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]);
}
}
特定の検索用語を使用して、Wikipedia APIに対してリクエストJsonpを行うサービスを注入しています。我々は呼んでいることに注意してくださいから得るためにします。最終的には、検索メソッドの戻り値の型として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)。
WikipediaServiceのsearchメソッドが返すというPromiseの結果を展開し、それを単純な文字列の配列としてテンプレートに公開して、*ngForループしてリストを作成できるようにします。
上の約束ベースの実装の例を参照してくださいPlunker
観測可能な場所本当に輝く
すべてのキーストロークでエンドポイントを叩かないようにコードを変更してみましょう。代わりに、ユーザーが入力を停止したときにのみリクエストを送信します 400ミリ秒
そのような超能力を明らかにするためにObservable<string>、ユーザーが入力した検索語を運ぶを最初に取得する必要があります。keyupイベントに手動でバインドする代わりに、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 {}
インポートしたら、テンプレート内からformControlを使用して、「term」という名前に設定できます。
<input type="text" [formControl]="term"/>
コンポーネントでは、のインスタンスを作成します FormControl fromの@angular/formし、コンポーネントの名前termの下のフィールドとして公開します。
舞台裏で、termは自動的にサブスクライブ可能なObservable<string>asプロパティvalueChangesを公開します。今、私たちは持っていることをObservable<string>、ユーザの入力を克服して呼び出すように簡単ですdebounceTime(400)私たちにObservable。これはObservable<string>、400msの間新しい値が来ていない場合にのみ新しい値を放出するnewを返します。
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)
Observableの実装例を参照してくださいPlunker
順不同の応答の扱いについては、記事全体を確認してください
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
AngularでHttpを使用している限り、通常の使用例ではObservable over Promiseを使用しても大きな違いはないことに同意します。ここで実際に関連する利点はありません。私は将来的にいくつかの高度なユースケースを見ることができることを願っています:)
もっと詳しく知る
