Angular에서 Promise 와 Observable 의 차이점은 무엇입니까?
각각에 대한 예는 두 경우를 모두 이해하는 데 도움이 될 것입니다. 각 경우에 어떤 시나리오를 사용할 수 있습니까?
반응형
질문자 :Rohit
약속하다
Promise 는 비동기 작업이 완료되거나 실패할 때 단일 이벤트를 처리합니다.
참고: 취소를 지원하는 Promise Promise 는 지금까지 지원하지 않습니다.
주목할 만한
Observable 은 Stream (많은 언어에서)과 같으며 각 이벤트에 대해 콜백이 호출되는 0개 이상의 이벤트를 전달할 수 있습니다.
Observable Promise 등의 기능을 제공하기 때문에 Promise 보다 선호되는 경우가 많습니다. Observable 을 사용하면 0, 1 또는 여러 이벤트를 처리하려는 경우 중요하지 않습니다. 각각의 경우에 동일한 API를 사용할 수 있습니다.
Observable 은 또한 Promise 에 비해 취소 가능 하다는 장점이 있습니다. 서버 나 다른 고가의 비동기 작업에 대한 HTTP 요청의 결과가 더 이상 필요하지 않은 경우, Subscription 의 Observable 잠시 구독을 취소 할 수 있습니다 Promise 결국 당신이하지 않는 경우에도 성공 또는 실패 콜백을 호출합니다 더 이상 알림 또는 제공하는 결과가 필요합니다.
Promise 는 즉시 시작되지만 Observable 은 구독하는 경우에만 시작됩니다. 이것이 Observable을 lazy라고 부르는 이유입니다.
Observable은 배열과 유사한 map , forEach , reduce , ... 같은 연산자를 제공합니다.
retry() 또는 replay() 와 같은 강력한 연산자도 있으며 ... 종종 매우 편리합니다. rxjs와 함께 제공되는 연산자 목록
지연 실행을 사용하면 옵저버블이 구독에 의해 실행되기 전에 연산자 체인을 구축하여 보다 선언적인 종류의 프로그래밍을 수행할 수 있습니다.
Günter Zöchbauer
Promises 와 Observables 은 모두 애플리케이션의 비동기적 특성을 처리하는 데 도움이 되는 추상화를 제공합니다. 그들 사이의 차이점은 Günter 와 @Relu에 의해 명확하게 지적되었습니다.
코드 스니펫은 천 단어의 가치가 있으므로 더 쉽게 이해할 수 있도록 아래 예제를 살펴보겠습니다.
멋진 기사에 대해 @Christoph Burgdorf에게 감사드립니다.
Angular는 HTTP 처리에 대한 약속 대신 Rx.js Observable을 사용합니다.
입력하는 즉시 결과를 표시 하는 검색 기능 을 구축한다고 가정해 보겠습니다. 익숙하게 들리지만 그 작업에는 많은 어려움이 따릅니다.
- 사용자가 키를 누를 때마다 서버 끝점에 도달하고 싶지 않습니다. 그것은 HTTP 요청의 폭풍우로 그들을 범람해야합니다. 기본적으로 우리는 모든 키 입력 대신 사용자가 타이핑을 멈춘 후에만 누르기를 원합니다.
- 후속 요청에 대해 동일한 쿼리 매개변수 를 사용하여 검색 엔드포인트에 도달하지 마십시오.
- 비순차적 응답을 처리합니다. 동시에 여러 요청이 진행 중인 경우 예기치 않은 순서로 다시 오는 경우를 고려해야 합니다. 먼저 computer , stop 을 입력하고 요청이 종료되고 car , stop 을 입력하고 요청이 종료된다고 상상해 보십시오. 이제 두 가지 요청이 진행 중입니다. 불행히도 컴퓨터에 대한 결과를 전달하는 요청은 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 에 대해 GET 요청을 하기 위해 Jsonp 서비스를 주입하고 있습니다. Observable<Response> 에서 Promise<Response> 로 이동하기 위해 toPromise 를 호출한다는 점에 주목하세요. 결국 검색 메소드의 반환 유형으로 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의 검색 메서드가 반환하는 Promise 의 결과를 풀고 템플릿에 단순 문자열 배열로 노출하여 *ngFor 루프를 통해 우리를 위한 목록을 만들 수 있습니다.
Plunker 에서 Promise 기반 구현의 예를 참조하십시오.
Observable이 정말 빛나는 곳
모든 키 입력으로 끝점을 망치지 않고 사용자가 400ms 동안 입력을 중단할 때만 요청을 보내도록 코드를 변경해 보겠습니다.
이러한 초능력을 공개하려면 먼저 Observable<string> formControl 합니다. 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"/> 구성 요소에서 @angular/form FormControl 의 인스턴스를 만들고 구성 요소의 이름 용어 아래에 필드로 노출합니다.
배후에서 term 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 400 ms 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을 Promise보다 사용할 때 큰 차이가 없다는 데 동의합니다. 이점 중 어느 것도 실제로 여기에서 실제로 관련이 없습니다. 앞으로 고급 사용 사례를 볼 수 있기를 바랍니다. :)
더 알아보기
trungk18
Promise 와 Observable 은 모두 JavaScript 의 비동기 기능 을 사용하는 데 도움이 됩니다. 많은 경우에 매우 유사하지만 둘 사이에는 여전히 몇 가지 차이점이 있습니다. Promise는 HTTP 호출과 같은 asynchronous 반면에 Observable은 일련의 비동기 이벤트를 처리합니다 . 이들 간의 주요 차이점은 다음과 같습니다.
약속하다:
- 하나의 파이프라인이 있는
- 일반적으로 비동기 데이터 반환에만 사용
- 취소가 쉽지 않다
주목할 만한:
- 취소 가능
- retry 및 retry와 같이 본질적으로 다시 시도할 수 있습니다.
- 여러 파이프라인에서 데이터 스트리밍
- 맵, 필터 등과 같은 배열과 유사한 작업을 가짐
- 이벤트와 같은 다른 소스에서 생성할 수 있습니다.
- 나중에 구독할 수 있는 함수입니다.
또한 차이점을 시각적으로 보여주기 위해 아래 그래픽 이미지를 만들었습니다.
Alireza
답변에 Observable이 누락되었다는 단점이 하나 있습니다. Promise를 통해 ES7 async/await 기능을 사용할 수 있습니다. 그것들을 사용하면 동기 함수 호출처럼 비동기 코드를 작성할 수 있으므로 더 이상 콜백이 필요하지 않습니다. Observable이 이를 수행할 수 있는 유일한 가능성은 이를 Promise로 변환하는 것입니다. 그러나 이를 Promise로 변환하면 다시 하나의 반환 값만 가질 수 있습니다.
async function getData(){ const data = await observable.first().toPromise(); //do stuff with 'data' (no callback function needed) }besserwisser
약속
- 정의: 함수를 비동기적으로 실행하고 반환 값(또는 예외)을 사용하도록 도와주지만 실행될 때 한 번만 가능합니다.
- 게으르지 않다
- 취소할 수 없습니다(취소를 지원하는 Promise 라이브러리가 있지만 ES6 Promise는 지금까지 지원하지 않습니다). 두 가지 가능한 결정은
- 거부하다
- 해결하다
- 재시도 할 수 없음(Promise는 재시도 기능을 갖기 위해 Promise를 반환한 원래 함수에 액세스할 수 있어야 합니다. 이는 나쁜 습관입니다.)
Observable
- 정의: 함수를 비동기적으로 실행하고 실행 시 반환 값을 연속 시퀀스( 여러 번 )로 사용하는 데 도움이 됩니다.
- 기본적으로 시간이 지남에 따라 값을 내보내므로 지연됩니다.
- 코딩 작업을 단순화하는 많은 연산자가 있습니다.
- 하나의 연산자 재시도 는 필요할 때마다 재시도하는 데 사용할 수 있으며 일부 조건에 따라 옵저버블을 재시도해야 하는 경우에도 retryWhen을 사용할 수 있습니다.
참고 : 대화형 다이어그램과 함께 연산자 목록은 **RxMarbles.com **에서 확인할 수 있습니다.
Aravind
Promise와 Observable은 모두 비동기식 호출만 처리합니다.
차이점은 다음과 같습니다.
주목할 만한
- 일정 기간 동안 여러 값을 내보냅니다.
- Observable을 구독할 때까지 호출되지 않습니다.
- unsubscribe() 메서드를 사용하여 취소할 수 있습니다.
- map, forEach, filter, reduce, retry 및 retryWhen 연산자를 제공합니다.
약속하다
한 번에 하나의 값만 내보냅니다.
.then 및 .catch 없이 서비스를 호출합니다.
취소할 수 없음
연산자를 제공하지 않음
sudheer nunna
차이점을 아래에 요약했습니다.
주목할 만한:
- 관찰은 단지 인
function한다an observerA와 반환function Observer: an object with next, error. - 관찰자는
subscribe/unsubscribenotify다음 값을 내보내고 관찰자에게errorsstream completion대해 알릴 수 있습니다. - Observer는
function to handle next value, 오류 및 스트림 끝( UI 이벤트, http 응답, 웹 소켓이 있는 데이터)을 처리하는 기능을 제공합니다. - 시간이 지남에 따라
multiple values작동 -
cancel-able/retry-ablemap, filter, reduce등과 같은 연산자를 지원합니다. - Observable 생성은 다음과 같습니다. -
Observable.create()- 메서드를 호출할 수 있는 Observable을 반환 -Observer Observable.from()- 배열 또는 이터러블을 다음으로 변환 -Observable Observable.fromEvent()- 이벤트를 Observable로 변환 -Observable.fromPromise()- Promise를 Observable로 변환 -Observable.range()- 지정된 범위의 정수 시퀀스를 반환합니다.
약속 :
약속은 미래에 완료될 작업을 나타냅니다.
약속
resolved by a value.약속은 예외에 의해 거부됩니다.
cancellable할 수 없으며a single value약속은 함수를 노출합니다
(then)-그런 다음 새
promise반환합니다.-
stateattachment을 허용합니다.-
handlers는 첨부된order attachedguaranteed됩니다.
Sajeetharan
나는 다른 모든 대답이 당신의 의심을 풀어야 한다고 믿습니다. 그럼에도 불구하고 저는 관찰 가능 항목이 함수형 프로그래밍에 기반을 두고 있다는 점을 추가하고 싶었고 map, flatmap, reduce, zip과 같이 함께 제공되는 매우 유용한 기능을 찾았습니다. 웹이 특히 API 요청에 의존할 때 달성하는 일관성은 엄청난 개선입니다.
나는 이 문서를 강력히 추천합니다. 왜냐하면 이것은 reactX의 공식 문서이고 가장 명확한 문서이기 때문입니다.
관찰 가능 항목에 들어가고 싶다면 이 3부 게시물을 제안합니다. http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/
RxJava를 위한 것이지만 개념은 동일하며 정말 잘 설명되어 있습니다. ReactiveX 문서에는 각 기능에 대한 동등성이 있습니다. RxJS를 찾아야 합니다.
Marc Pérez
방금 Promise가 최상의 솔루션인 문제를 처리했으며 유용한 경우 이 질문에 걸려 넘어지는 사람을 위해 여기에서 공유하고 있습니다(이것이 바로 제가 이전에 찾고 있던 답변이었습니다).
Angular2 프로젝트에는 일부 매개변수를 사용하고 양식의 드롭다운 메뉴를 채우기 위해 값 목록을 반환하는 서비스가 있습니다. 양식 구성 요소가 초기화될 때 여러 다른 드롭다운 메뉴를 정의하기 위해 다른 매개변수를 사용하여 동일한 서비스를 여러 번 호출해야 하지만 서비스를 호출하기 위해 모든 변수를 단순히 대기열에 넣으면 마지막 항목만 성공하고 나머지는 오류가 발생합니다. 밖. 데이터베이스에서 가져오는 서비스는 한 번에 하나의 요청만 처리할 수 있습니다.
모든 드롭다운 메뉴 변수를 성공적으로 채우는 유일한 방법은 마지막 요청이 완료될 때까지 새 요청이 처리되지 않도록 하는 방식으로 서비스를 호출하는 것이며 Promise / .then 메커니즘이 문제를 훌륭하게 해결했습니다.
fetchValueList(listCode): Promise<any> { return this.dataSvc.getValueList(listCode, this.stateSvc.currentContext, this.stateSvc.currentLanguageCode) .map(response => response.json()) .toPromise(); } initializeDropDowns() { this.fetchValueList('First-Val-List') .then(data => { this.firstValList = data; return this.fetchValueList('Second-Val-List') }).then(data => { this.secondValList = data; return this.fetchValueList('Third-Val-List') }).then(data => { this.thirdValList = data; }) }컴포넌트에서 함수를 정의한 다음 ngOnInit에서 initializeDropDowns()를 호출했습니다.
fetchValueList 함수는 Promise를 반환하므로 첫 번째 호출은 첫 번째 listCode를 전달하고 Promise가 해결되면 반환 값은 this.firstValList 변수에 할당할 수 있는 .then 블록의 데이터 변수에 있습니다. 함수가 데이터를 반환했기 때문에 서비스가 완료되었고 두 번째 listCode로 다시 호출하는 것이 안전하다는 것을 알고 반환 값은 다음 .then 블록의 데이터 변수에 있으며 this.secondValList 변수에 할당합니다.
모든 변수를 채우는 데 필요한 만큼 이것을 연결할 수 있으며 마지막 코드 블록에서 단순히 return 문을 생략하고 블록이 종료됩니다.
이것은 구성 요소가 초기화될 때 여러 번 호출해야 하는 단일 서비스가 있고 서비스가 다시 호출될 수 있기 전에 가져오기를 완료하고 값을 반환해야 하는 매우 구체적인 사용 사례입니다. Promise / .then 메소드가 이상적이었습니다.
Stephen R. Smith
개요:
- Promise와 Observable은 모두 비동기 작업을 처리하는 데 도움이 됩니다. 이러한 비동기 작업이 완료되면 특정 콜백을 호출할 수 있습니다.
- Promise는 하나의 이벤트만 처리할 수 있습니다. Observable은 시간 경과에 따른 이벤트 스트림을 위한 것입니다.
- 보류 중인 약속은 취소할 수 없습니다.
- 데이터 Observable이 방출하는 것은 연산자를 사용하여 변환할 수 있습니다.
옵저버블에는 프라미스가 제공하는 모든 기능(+ 추가 기능)이 있으므로 비동기 동작을 처리하기 위해 항상 옵저버블을 사용할 수 있습니다. 그러나 때때로 Observables가 제공하는 이 추가 기능은 필요하지 않습니다. 그런 다음 라이브러리를 사용하기 위해 라이브러리를 가져오는 데 추가 오버헤드가 발생합니다.
Promise를 사용하는 경우:
결과를 처리하려는 단일 비동기 작업이 있는 경우 약속을 사용합니다. 예를 들어:
var promise = new Promise((resolve, reject) => { // do something once, possibly async // code inside the Promise constructor callback is getting executed synchronously if (/* everything turned out fine */) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } }); //after the promise is resolved or rejected we can call .then or .catch method on it promise.then((val) => console.log(val)) // logs the resolve argument .catch((val) => console.log(val)); // logs the reject argument 따라서 약속은 해결되거나 거부되는 일부 코드를 실행합니다. 해결 또는 거부가 호출되면 약속은 보류 상태 에서 해결 또는 거부된 상태로 이동합니다. 약속 상태가 해결되면 then() 메서드가 호출됩니다. 약속 상태가 거부되면 catch() 메서드가 호출됩니다.
Observable을 사용하는 경우:
시간이 지남에 따라 처리해야 하는 데이터 스트림 이 있는 경우 Observable을 사용하세요. 스트림은 시간이 지남에 따라 사용 가능하게 되는 일련의 데이터 요소입니다. 스트림의 예는 다음과 같습니다.
- 사용자 이벤트(예: 클릭 또는 키업 이벤트). 사용자는 시간이 지남에 따라 이벤트(데이터)를 생성합니다.
- Websockets는 클라이언트가 WebSocket을 서버에 연결한 후 시간이 지남에 따라 데이터를 푸시합니다.
Observable 자체는 다음 이벤트 가 발생했을 때, 오류가 발생 했을 때 또는 Observable이 완료 되었을 때 지정됩니다. 그런 다음 이 옵저버블을 구독하여 활성화하고 이 구독에서 3개의 콜백을 전달할 수 있습니다(항상 모두 전달할 필요는 없음). 성공 시 하나의 콜백, 오류 시 하나의 콜백, 완료 시 하나의 콜백. 예를 들어:
const observable = Rx.Observable.create(observer => { // create a single value and complete observer.onNext(1); observer.onCompleted(); }); source.subscribe( x => console.log('onNext: %s', x), // success callback e => console.log('onError: %s', e), // error callback () => console.log('onCompleted') // completion callback ); // first we log: onNext: 1 // then we log: onCompleted 옵저버블을 생성할 때 옵저버를 인수로 제공하는 콜백 함수가 필요합니다. onNext , onCompleted , onError 호출할 수 있습니다. 그런 다음 Observable이 구독되면 구독에 전달된 해당 콜백을 호출합니다.
Willem van der Veen
약속하다:
- 하나의 미래 가치를 제공합니다.
- 게으르지 않다.
- 취소 불가;
주목할 만한:
- 시간이 지남에 따라 여러 값을 내보냅니다.
- 게으른;
- 취소 가능
- 맵, 필터, 리듀스 및 유사 연산자 지원
원하는 경우 Angular에서 HTTP를 호출할 때 관찰 가능 항목 대신 약속을 사용할 수 있습니다.
Iosua Sipos
약속 - 하나의 미래 가치를 제공합니다. 게으르지 않습니다. 취소 불가. 거부하거나 해결합니다.
관찰 가능 - 여러 미래 값을 제공합니다. 게으른. 취소 가능. map , filter 및 reduce 와 같은 다른 방법을 제공합니다.
Gajender Singh
Promise는 단일 값을 내보내고 Observable은 여러 값을 내보냅니다. 따라서 HTTP 요청을 처리하는 동안 Promise는 동일한 요청에 대한 단일 응답을 관리할 수 있지만 동일한 요청에 대해 여러 응답이 있는 경우 Observable을 사용해야 합니다. 예, Observable은 동일한 요청에 대한 여러 응답을 처리할 수 있습니다.
약속하다
const promise = new Promise((data) => { data(1); data(2); data(3); }) .then(element => console.log('Promise ' + element));산출
Promise 1주목할 만한
const observable = new Observable((data) => { data.next(1); data.next(2); data.next(3); }).subscribe(element => console.log('Observable ' + element));산출
Observable 1 Observable 2 Observable 3Yogesh Waghmare
Promise vs Observable 유사성 우선
둘 다 비동기 코드를 처리하는 데 사용됩니다.
약속의 예를 찾아보세요. Promise 생성자는 일부 비동기 작업 완료 시 특정 값으로 호출될 때 호출되는 확인 참조 함수를 전달합니다.
const promise = new Promise(resolve => { setTimeout(() => { resolve("Hello from a Promise!"); }, 2000); }); promise.then(value => console.log(value));이제 관찰 가능한 예입니다. 여기서 우리는 또한 observable에 함수를 전달합니다. 즉, 비동기 작업을 처리하는 관찰자입니다. Promise의 resolve와 달리 다음과 같은 메소드를 가지고 있으며 then 대신 subscribe를 합니다.
따라서 둘 다 비동기 작업을 처리합니다. 이제 차이점을 살펴보겠습니다.
const observable = new Observable(observer => { setTimeout(() => { observer.next('Hello from a Observable!'); }, 2000); }); observable.subscribe(value => console.log(value));
약속 대 관찰 가능한 차이
약속하다
- 단일 값을 확인하거나 거부하고 한 번에 단일 값 비동기 작업을 처리할 수 있습니다.
- 한 번 완료한 비동기 값을 해결한 약속은 더 이상 사용할 수 없습니다. 한 번만 사용할 수 있으며 여기서는 부족합니다.
- 취소 불가
- 연산자에 대한 rxjs 지원이 없습니다.
주목할 만한
여러 비동기 값을 내보내는 기능.
이벤트 또는 값의 스트림을 처리하는 데 사용됩니다. 수많은 작업이나 값의 배열이 있고 여기에 값이 삽입될 때마다 자동으로 처리되어야 한다고 가정합니다. 이 배열에 값을 푸시할 때마다 모든 구독자는 최신 값을 자동으로 받습니다.
Observable은 입력 변경, 반복되는 간격, 모든 자식 구성 요소에 대한 브로드캐스트 값, 웹 소켓 푸시 알림 등을 관찰하는 데 유용합니다.
구독 취소 방법을 사용하여 언제든지 취소할 수 있습니다.
rxjs 연산자에 대한 지원을 약속하는 마지막 좋은 부분이 하나 더 있습니다. 구독하기 전에 관찰 가능한 데이터를 변환하기 위해 주로 map, filter, switchMap, CombineLatest 등 많은 파이프 연산자가 있습니다.
ramesh sharma
Promise는 비동기 활동이 완료되거나 실패할 때 단일 이벤트를 내보냅니다.
Observable은 Stream(많은 언어에서)과 같으며 모든 이벤트에 대해 콜백이 필요한 경우 최소한 0개 이상의 이벤트를 전달할 수 있습니다.
자주 관찰할 수 있는 것은 Promise 등의 하이라이트를 제공하기 때문에 Promise보다 선호됩니다. Observable을 사용하면 0, 1 또는 다양한 이벤트를 처리해야 하는지 여부는 중요하지 않습니다. 각각의 경우에 유사한 API를 사용할 수 있습니다.
Promise: Promise 는 단일 값을 내보냅니다.
예를 들어:
const numberPromise = new Promise((resolve) => { resolve(5); resolve(10); }); numberPromise.then(value => console.log(value)); // still prints only 5관찰 가능: 일정 기간 동안 여러 값을 내보냅니다.
예를 들어:
const numberObservable = new Observable((observer) => { observer.next(5); observer.next(10); }); numberObservable.subscribe(value => console.log(value)); // prints 5 and 10우리는 Observable을 일정 기간 동안 여러 값을 방출하는 스트림과 같은 것으로 생각할 수 있으며 방출된 각 항목에 대해 동일한 콜백 함수가 호출되므로 Observable을 사용하면 동일한 API를 사용하여 비동기 데이터를 처리할 수 있습니다. 해당 데이터가 단일 값으로 전송되는지 또는 일정 기간 동안 여러 값으로 전송되는지 여부.
약속하다:
- 약속은 게으르지 않다
- A 약속은 취소할 수 없습니다
주목할 만한:
- Observable은 Lazy입니다. "관찰 가능"은 느립니다. 구독할 때까지 호출되지 않습니다.
- unsubscribe() 메서드를 사용하여 Observable을 취소할 수 있습니다.
- 추가 Observable은 map, foreach, filter, reduce, retry, retryWhen 등과 같은 많은 강력한 연산자를 제공합니다.
DeC
Promise와 Observable은 모두 비동기 작업을 처리하는 데 도움이 됩니다. 이러한 비동기 작업이 완료되면 특정 콜백을 호출할 수 있습니다.
Angular는 HTTP 처리에 대한 약속 대신 RxJS의 Observable을 사용합니다.
Below are some important differences in promises & Observables.
Srikrushna
다음은 promise와 Observable의 중요한 차이점입니다.
약속하다
- 단일 값만 내보냅니다.
- 취소 불가
- 공유 불가
- 항상 비동기
주목할 만한
- 여러 값을 내보냅니다.
- 호출되거나 누군가가 구독 중일 때만 실행
- 취소 가능
- 여러 구독자가 공유 가치를 공유하고 구독할 수 있습니다. 그리고 모든 구독자는 단일 시점에서 실행됩니다.
- 아마도 비동기식
더 나은 이해를 위해 https://stackblitz.com/edit/observable-vs-promises를 참조하십시오.
Bikram
약속하다:
비동기 이벤트 처리기 - Promise 개체는 비동기 작업의 최종 완료(또는 실패)와 결과 값을 나타냅니다.
구문: new Promise(실행자);
예를 들어:
var promise_eg = new Promise(function(resolve, reject) { setTimeout(function() { resolve('foo'); }, 300); }); promise_eg.then(function(value) { console.log(value); // expected output: "foo" }); console.log(promise_eg); 
약속에 대해:
하나의 파이프라인이 있으므로 호출될 때 한 번만 값을 반환합니다. 단방향 핸들러이므로 한 번 호출되면 취소할 수 없습니다. when() 및 then() 을 사용할 수 있는 유용한 구문입니다.
관찰 가능 항목:
Observable은 시간이 지남에 따라 여러 값의 지연 모음입니다. 이것은 비동기 작업을 위한 정말 훌륭한 접근 방식입니다. 크로스 플랫폼을 지원하는 rxjs 로 수행할 수 있으며 Angular/React 등과 함께 사용할 수 있습니다.
스트림 라이너처럼 작동하며 다중 파이프라인이 될 수 있습니다. 따라서 일단 정의되면 여러 곳에서 반환 결과를 얻기 위해 구독할 수 있습니다.
구문: import * as Rx from "@reactivex/rxjs"; 초기화하려면:
Rx.Observable.fromEvent(button, "click"), Rx.Subject()등.
구독하려면: RxLogger.getInstance();
예를 들어:
import { range } from 'rxjs'; import { map, filter } from 'rxjs/operators'; range(1, 200).pipe( filter(x => x % 2 === 1), map(x => x + x) ).subscribe(x => console.log(x));멀티 파이프라인을 지원하므로 다른 위치에서 결과를 구독할 수 있으며,
약속보다 더 많은 가능성이 있습니다.
용법:
map , filter , pipe , map , concatMap 등과 같은 더 많은 가능성이 있습니다.
Mohideen bin Mohammed
Günter Zöchbauer의 대답 은 일반적으로 좋지만 Angular 구성 요소를 처리할 때 취소를 지원하기 때문에 Observable을 거의 항상 사용하고 싶어한다는 점을 강조하지는 않습니다. 약속은 취소할 수 없으며 구성 요소가 파괴되더라도 해결됩니다. Angular는 그렇지 않을 때까지 용서하는 경향이 있습니다.
예를 들어 파괴된 구성 요소에 대한 수동 변경 감지는 예외를 발생시킵니다.
ngOnInit() { // Promise API this.service.getData().then(d => { this.data = d; this.changeDetectorRef.detectChanges(); }); // Observable API this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => { this.data = d; this.changeDetectorRef.detectChanges(); }); } Promise가 해결되기 전에 구성 요소가 소멸되면 Promise가 해결될 때 attempt to use destroyed view
또는 takeUntil 패턴으로 옵저버블 을 사용하는 경우 구성 요소가 삭제되는 즉시 구독이 취소됩니다.
이것은 다소 인위적인 예이지만 파괴된 구성 요소에 대한 코드를 실행하면 버그가 발생할 수 있습니다.
shusson
짧은 답변:
관찰 가능한 것이 더 좋습니다 . 모든 약속 기능과 추가 기능이 있습니다.
긴 대답:
약속:
- 한 번 사용 "데이터 한 번 반환"
- 취소 불가
- 한 명의 청취자
- 소켓 지원 없음
관찰 가능 항목:
- 데이터가 변경되면 데이터를 여러 번 반환
- 지원 취소
- 지원 소켓
- 많은 리스너를 지원하고 데이터 변경 시 알림
- 지도, 필터링 및 축소 지원
Amr Ibrahim
Observable이 "취소 가능"하다는 주장을 사용하는 사람들을 많이 보았지만 Promise를 "취소 가능"하게 만드는 것은 다소 사소합니다.
function cancellablePromise(body) { let resolve, reject; const promise = new Promise((res, rej) => { resolve = res; reject = rej; body(resolve, reject) }) promise.resolve = resolve; promise.reject = reject; return promise } // Example 1: Reject a promise prematurely const p1 = cancellablePromise((resolve, reject) => { setTimeout(() => resolve('10', 100)) }) p1.then(value => alert(value)).catch(err => console.error(err)) p1.reject(new Error('denied')) // expect an error in the console // Example: Resolve a promise prematurely const p2 = cancellablePromise((resolve, reject) => { setTimeout(() => resolve('blop'), 100) }) p2.then(value => alert(value)).catch(err => console.error(err)) p2.resolve(200) // expect an alert with 200Batiste Bieler
Observable과 Promise의 기본적인 차이점은 다음과 같습니다.
Chirag
- Promise는 열심인 반면 Observable은 게으릅니다.
- Promise는 항상 비동기식이지만 Observable은 동기식이거나 비동기식일 수 있습니다.
- Promise는 단일 값을 제공할 수 있지만 Observable은
값 스트림(0에서 여러 값까지), - RxJS 연산자를 Observable에 적용하여 새로운 맞춤형 스트림을 얻을 수 있습니다.
Yogesh Waghmare
튜토리얼과 문서를 처음 읽었을 때 명확하지 않은 부분은 멀티캐스팅에 대한 아이디어였습니다.
기본적으로 다중 구독은 Observable에서 다중 실행을 트리거한다는 것을 알고 있어야 합니다. .share() (멀티캐스팅 활성화)가 아닌 한 여러 동일한 HTTP 호출을 트리거합니다.
Promise는 한 번에 한 가지만 처리하고, 데이터를 풀고, 예외를 처리하고, async/await와 같은 멋진 항목에 대한 언어 지원을 제공하며, 그렇지 않은 경우에는 아주 기본적인 것입니다.
Observable에는 많은 종소리와 휘파람이 있지만 작업하고 있는 힘을 이해해야 하며 그렇지 않으면 오용될 수 있습니다.
rpgFANATIC
Promise : 생성 즉시 실행되는 비동기 코드를 처리하는 ES6 기능으로 한 번에 하나의 값만 방출할 수 있고 취소할 수 없습니다. 최신 응용 프로그램과 기능 요구 사항의 복잡성으로 인해 동시에 많은 약속을 실행하거나 실행 전에 필터링하거나 일부 변환을 수행하는 경우 복잡한 코드를 구현해야 합니다.
myPromise.then((resolvedValue) => { console.log(resolvedValue); }, (error) => { console.log(error); }); Observable: Rxjs 라이브러리에서 제공하는 객체로 JavaScript 애플리케이션에서 반응형 프로그래밍 작업을 하는 데 도움이 됩니다. 이 객체는 취소할 수 있다는 장점이 있는 복잡한 애플리케이션을 처리하기 위한 연결 및 구독을 제공하여 동시에 많은 값을 제공합니다. 또한 복잡한 사용 사례와 무거운 사용자 인터페이스를 처리하는 데 도움이 되는 retry() , map() , filter() , switchMap() 등과 같은 다른 연산자의 연결을 적용하여 이점을 얻을 수 있습니다.
인스턴트 검색의 예:
search(terms: Observable<string>) { return terms.pipe( debounceTime(400), distinctUntilChanged(), switchMap((term) => this.searchEntries(term)) ); }병렬로 여러 APIS 호출의 예:
let character = this.http.get('https://jsonplaceholder.typicode.com/todos'); let characterHomeworld = this.http.get( 'https://jsonplaceholder.typicode.com/posts' ); forkJoin([character, characterHomeworld]).subscribe((results) => { console.log('result °', results[0]); console.log('result 1', results[1]); });Rebai Ahmed
약속은 단일 가치 또는 해결에만 집중됩니다. Observable은 데이터 스트림입니다.
Observable은 취소할 수 있지만 약속은 취소할 수 없습니다.
적어도 나에게 가장 덜 알려진 것은 다음과 같습니다.
- Promise는 항상 비동기식이지만 Observable은 동기식과 비동기식 모두일 수 있습니다.
이에 대해 자세히 읽고 싶다면 이 답변에 대한 블로그 게시물을 작성했습니다. - JavaScript에서 Observable과 Promise의 4가지 차이점
Vignesh
해변에 가고 싶다고 가정해 봅시다. 날씨에 따라 결정해야 합니다. 3가지 방법이 있습니다.
1- 밖을 보고 빗방울을 보고 마음이 바뀝니다. 이것은 동기화된 작업입니다. 하던 일을 멈추고 외부를 확인하고 결과를 확인하고 하던 일을 다시 시작했습니다.
2- 옆에 있는 형에게 오늘 날씨를 확인해 달라고 부탁한다. 그가 날씨를 확인하는 동안, 당신은 여전히 당신이 하던 일을 계속하고 있습니다. 이것은 비동기 작업입니다. 당신은 당신의 형제에게 임무를 부여하고 약속이 해결되기를 기다리고 있습니다. 이 경우 하나의 응답을 받고 응답을 받은 후에는 더 이상 업데이트를 받지 못합니다.
3- 이번에는 라디오를 켜고 연중무휴로 기상 조건을 방송하는 기상 채널을 듣습니다. 이 시나리오에서는 단일 응답을 받는 대신 응답이 진행 중입니다. 이 응답은 observable subscription 과 같습니다. 관측 가능한 것은 "날씨"이고 구독은 "업데이트를 유지하는 라디오 신호"입니다. 라디오가 켜져 있는 한 사용 가능한 모든 업데이트를 받고 있습니다. 라디오를 끌 때까지 어떤 정보도 놓치지 않습니다. 라디오를 끄면 "구독 취소"를 의미합니다.
Yilmaz
또 다른 차이점: 글로벌 vs. 수입
Promise는 표준 내장 객체 이며 직접 사용할 수 있습니다. 여기에서 브라우저 지원을 확인하십시오 .
const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('ready with out any installation'); }, 300); }); myPromise .then(value => { console.log(value) }) .catch(err => { console.log(err) });JavaScript용 Observable, Reactive Extensions 는 사용 전에 RxJS 설치 및 가져오기가 필요합니다.
import { Observable } from 'rxjs';Anulal S
A Promise handles a single event when an async operation completes or fails. Promises are auto executed in application while observables are lazy, we have to subscribe observables to return the data. We cannot unsubscribe promises they will execute every time instaead of Observables can be unsubscribe.ANKIT MISHRA
Observable과 Promise는 JavaScript/TypeScript의 비동기 기능을 사용하는 데 도움이 됩니다. 많은 경우에 매우 유사하지만 여전히 몇 가지 차이점이 있습니다.
FAISAL
출처 : http:www.stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 각 GROUP BY 그룹에서 첫 번째 행을 선택하시겠습니까? (0) | 2022.01.23 |
|---|---|
| 분리된 HEAD를 마스터/원본과 어떻게 조정할 수 있습니까? (0) | 2022.01.23 |
| jQuery의 $.ready()에 해당하는 순수 JavaScript - 페이지/DOM이 준비되었을 때 함수를 호출하는 방법 [중복] (0) | 2022.01.23 |
| JavaScript에서 객체에 특정 속성이 있는지 어떻게 확인합니까? (0) | 2022.01.23 |
| 항상 새 탭에서 파일 열기 (0) | 2022.01.22 |