약속과 전망의 차이점은 무엇입니까

angular promise rxjs angular-promise angular-observable


Angular에서 PromiseObservable 의 차이점은 무엇입니까 ?

각각의 예는 두 경우를 이해하는 데 도움이 될 것입니다. 어떤 경우에 우리는 각 경우를 사용할 수 있습니까?




Answer 1 Günter Zöchbauer


Promise

Promise 처리 단일 이벤트 때 비동기 동작 완료되거나 실패.

참고 : 취소를 지원하는 Promise 라이브러리가 있지만 ES6 Promise 는 아직까지는 그렇지 않습니다.

Observable

Observable 유사한입니다 Stream (여러 언어로) 콜백이 각 이벤트에 대해 호출됩니다 0 개 이상의 이벤트를 전달할 수 있습니다.

종종 Observable 선호되고 Promise 은의 기능을 제공하기 때문에 Promise 등을. Observable 을 사용하면 0, 1 또는 여러 이벤트를 처리할지 여부는 중요하지 않습니다. 각 경우에 동일한 API를 사용할 수 있습니다.

Observable 도 이상의 장점을 가지고 Promise 으로 취소 할 . 서버 나 다른 고가의 비동기 작업에 대한 HTTP 요청의 결과가 더 이상 필요하지 않은 경우, SubscriptionObservable 잠시 구독을 취소 할 수 있습니다 Promise 결국 당신이하지 않는 경우에도 성공 또는 실패 콜백을 호출합니다 통지 또는 더 이상 제공되는 결과가 필요합니다.

Observable은 map , forEach , reduce , ...와 같은 연산자 를 배열과 유사하게 제공합니다

retry() 또는 replay() 와 같은 강력한 연산자도 있습니다 .




Answer 2 trungk18


모두 PromisesObservables 우리가 다루는 도움 것을 추상화를 제공해 비동기 우리의 응용 프로그램의 성격. 그들 사이의 차이점은 @ Günter와 @Relu에 의해 명확하게 지적되었습니다.

코드 스 니펫은 천 단어의 가치가 있으므로 아래 예제를 통해 쉽게 이해할 수 있습니다.

멋진 기사에 대해 Christoph Burgdorf에게 감사드립니다.


Angular는 HTTP 처리 약속 대신 Rx.js Observables를 사용합니다.

입력하는 즉시 결과를 표시 하는 검색 기능 을 구축한다고 가정하십시오 . 친숙하게 들리지만 그 과제에는 많은 어려움이 있습니다.

  • 사용자가 키를 누를 때마다 서버 엔드 포인트에 도달하지 않으려면 HTTP 요청 이 급증해야 합니다. 기본적으로, 우리는 사용자가 모든 키 입력 대신 입력을 중지 한 후에 만 ​​치고 싶습니다.
  • 후속 요청에 대해 동일한 쿼리 매개 변수 를 사용하여 검색 엔드 포인트에 도달하지 마십시오 .
  • 순서가 잘못된 응답을 처리합니다. 기내에서 여러 건의 요청이 동시에 발생하는 경우 예상치 못한 순서로 돌아 오는 사례를 고려해야합니다. 먼저 컴퓨터를 입력하고 , 중지하고, 요청이 나가고, 자동차 를 입력하고, 중지하고, 요청이 나가는 것을 상상해보십시오 . 이제 기내에서 두 가지 요청이 있습니다. 불행히도 컴퓨터에 대한 결과를 전달하는 요청은 car에 대한 결과를 전달하는 요청 후에 다시 발생합니다 .

데모는 단순히 app.tswikipedia-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 에 대해 GET 요청 을하기 위해 Jsonp 서비스를 주입하고 있습니다. 우리가 부르는 공지 toPromise 을 에서 얻을하기 위해 Observable<Response> A를 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 를 삽입하고 검색 방법을 통해 기능을 템플릿에 노출합니다. 템플릿은 단순히에 결합 의 keyup 를 호출합니다 search(term.value) .

우리 는 WikipediaService의 검색 메소드가 리턴하고 *ngFor 루프를 통해 목록을 작성할 수 있도록 템플리트에 간단한 문자열 배열로이를 노출한다는 약속 의 결과를 풀 었다 .

Plunker 에서 Promise 기반 구현 의 예를 참조하십시오


어디 Observable 인은 정말 빛

키를 누를 때마다 끝점을 망치지 말고 사용자가 400ms 동안 입력을 중지했을 때만 요청을 보내도록 코드를 변경해 봅시다.

이러한 강력한 기능을 공개하려면 먼저 사용자가 입력 한 검색어를 전달 하는 Observable<string>formControl 합니다. 키업 이벤트에 수동으로 바인딩하는 대신 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"/>

컴포넌트 에서 @angular/form 에서 FormControl 인스턴스를 작성하고 컴포넌트 의 이름 용어 아래 필드로 노출합니다.

내부적으로 이 용어는 자동으로 노출 Observable<string> 속성으로 valueChanges 우리가 가입 할 수 있습니다. 이제 Observable<string> 있으므로 사용자 입력을 극복하는 것은 Observable 에서 debounceTime(400) 을 호출하는 것만 큼 쉽습니다 . 400ms 동안 새로운 값이 나오지 않을 때만 새로운 값을 방출 하는 새로운 Observable<string> 을 반환합니다 .

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));
  }
}

앱에서 이미 결과를 표시하는 검색어에 대한 다른 요청을 보내면 리소스가 낭비됩니다. 원하는 동작을 달성하기 위해해야 ​​할 일은 debounceTime(400) 호출 한 직후 distinctUntilChanged 연산자 를 호출하는 것입니다.

Plunker 에서 Observable 구현 예제를 참조하십시오

순서가 잘못된 응답을 처리하려면 전체 기사 http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html을 확인하십시오.

Angular에서 Http를 사용하는 한 일반적인 사용 사례에서는 Observable over Promise를 사용할 때 큰 차이가 없다는 데 동의합니다. 실제로 어떤 이점도 실제로 관련이 없습니다. 앞으로 고급 사용 사례를 볼 수 있기를 바랍니다. :)


더 알아보기




Answer 3 Alireza


모두 약속Observables은이 우리에게 일을 도움이 될 것입니다 비동기 기능을 자바 스크립트입니다. 그것들은 많은 경우에 매우 유사하지만, 둘 사이에도 여전히 약간의 차이가 있습니다. 약속은 http 호출 과 같은 asynchronous 방식으로 해결되는 값입니다 . 반면, 관찰 가능 항목은 일련의 비동기 이벤트를 처리합니다 . 이들의 주요 차이점은 다음과 같습니다.

promise:

  • 하나의 파이프 라인을 갖는 것
  • 일반적으로 비동기 데이터 반환에만 사용
  • 취소하기 쉽지 않다

observable:

  • 취소 할 수있다
  • 재시도 및 재시 도와 같은 특성상 재시도 가능
  • 여러 파이프 라인에서 데이터 스트리밍
  • 맵, 필터 등과 같은 배열과 유사한 작업
  • 이벤트와 같은 다른 소스에서 만들 수 있습니다
  • 그것들은 나중에 구독 할 수있는 기능입니다.

또한 차이점을 시각적으로 보여주기 위해 아래의 그래픽 이미지를 만들었습니다.

Promises and Observables image




Answer 4 Aravind


Promises

  1. 정의 : 함수를 비동기식으로 실행하고 실행시 한 번만 반환 값 (또는 예외)을 사용하도록 도와줍니다 .
  2. 게으른
  3. 취소 할 수 없음 (취소를 지원하는 Promise 라이브러리가 있지만 ES6 Promise는 아직 지원하지 않습니다). 가능한 두 가지 결정은
    • Reject
    • Resolve
  4. 재 시도 할 수 없음 (약속에는 재시도 기능이 있다는 약속을 반환 한 원래 기능에 액세스해야합니다.

Observables

  1. 정의 : 함수를 비동기식으로 실행하고 실행시 연속 값 ( 여러 번 ) 으로 반환 값을 사용하도록 도와줍니다 .
  2. 기본적으로 시간이 지날 때 값을 방출하므로 지연됩니다.
  3. 코딩 작업을 단순화하는 많은 연산자가 있습니다.
  4. 한 운영자 재 시도는 우리가 어떤 조건에 따라 관찰을 재 시도 할 필요도 경우에, 필요할 때마다 다시 시도 할 수 있습니다 retryWhen가 사용할 수 있습니다.

    참고 : 대화식 다이어그램과 함께 운영자 목록은 RxMarbles.com 에서 확인할 수 있습니다.




Answer 5 besserwisser


답변에 Observables의 단점이 하나 있습니다. 약속은 ES7 비동기 / 대기 기능을 사용할 수 있습니다. 그것들을 사용하면 동기 함수 호출처럼 비동기 코드를 작성할 수 있으므로 더 이상 콜백이 필요하지 않습니다. Observables가이를 수행 할 수있는 유일한 가능성은 약속으로 변환하는 것입니다. 그러나이를 약속으로 변환하면 다시 한 번의 반환 값만 가질 수 있습니다.

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

더 읽을 거리 : Rx Observable에서 어떻게 '기다릴'수 있습니까?