[angular] 약속과 관찰의 차이점은 무엇입니까?

모두 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를 사용할 때 큰 차이가 없다는 데 동의합니다. 실제로 어떤 이점도 실제로 관련이 없습니다. 앞으로 고급 사용 사례를 볼 수 있기를 바랍니다. 🙂

더 알아보기

• https://angular-2-training-book.rangle.io/handout/observables/
• https://angular.io/tutorial/toh-pt6#observables

답변

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}