모두 Promises와 Observables도움을 우리가 다루는 것을 추상화를 제공해 비동기 우리의 응용 프로그램의 성격. 그들 사이의 차이점은 @ Günter와 @Relu에 의해 명확하게 지적되었습니다.
코드 스 니펫은 천 단어의 가치가 있으므로 아래 예제를 통해 쉽게 이해할 수 있습니다.
멋진 기사에 대해 Christoph Burgdorf에게 감사드립니다.
Angular는 HTTP 처리 약속 대신 Rx.js Observables를 사용합니다.
입력하는 즉시 결과를 표시 하는 검색 기능 을 구축한다고 가정하십시오 . 친숙하게 들리지만 그 과제에는 많은 어려움이 있습니다.
- 우리는 사용자가 키를 누를 때마다 서버 엔드 포인트에 충돌하지 않기를 원합니다.
HTTP . 기본적으로, 우리는 사용자가 모든 키 입력 대신 입력을 중지 한 후에 만 치고 싶습니다.
- 동일한 쿼리 매개 변수로 검색 엔드 포인트를 누르지 마십시오.후속 요청에 대해 를 .
- 순서가 잘못된 응답을 처리합니다. 기내에서 여러 건의 요청이 동시에 발생하는 경우 예상치 못한 순서로 되돌아 오는 사례를 고려해야합니다. 먼저 컴퓨터를 입력하고 , 중지하고, 요청이 나가고, 자동차 를 입력하고, 중지하고, 요청이 나가는 것을 상상해보십시오 . 이제 기내에서 두 가지 요청이 있습니다. 불행히도 컴퓨터에 대한 결과를 전달하는 요청은 car에 대한 결과를 전달하는 요청 후에 다시 발생합니다 .
데모는 단순히 두 개의 파일로 구성됩니다 : 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의 검색 메소드가 리턴하고 그것을 간단한 문자열 배열로 템플릿에 노출 시킨다는 약속 의 결과를 풀었다.*ngFor 반복하고 목록을 작성할 었다.
Plunker 에서 Promise 기반 구현 의 예를 참조하십시오
어디 Observable 인은 정말 빛
키를 누를 때마다 끝점을 망치지 말고 사용자가 400ms 동안 입력을 중지했을 때만 요청을 보내도록 코드를 변경해 봅시다.
이러한 초강대국을 공개하려면 먼저 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 {}
가져온 후에는 템플릿 내에서 formControl을 사용하여 "term"이라는 이름으로 설정할 수 있습니다.
<input type="text" [formControl]="term"/>
컴포넌트 FormControl에서 from 의 인스턴스를 만듭니다@angular/form 우리의 구성 요소에 이름 용어 아래 필드로 노출됩니다.
배후에서 용어 는 구독 할 수 있는 Observable<string>as 속성 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)
Plunker 에서 Observable 구현 예제를 참조하십시오
순서가 잘못된 응답을 처리하려면 전체 기사 http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html을 확인하십시오.
Angular에서 Http를 사용하는 한 일반적인 사용 사례에서는 Observable over Promise를 사용할 때 큰 차이가 없다는 데 동의합니다. 실제로 어떤 이점도 실제로 관련이 없습니다. 앞으로 고급 사용 사례를 볼 수 있기를 바랍니다. :)
더 알아보기
