약속과 관찰 가능한 것의 차이점은 무엇입니까?
사이의 차이점은 무엇입니까?Promise그리고.Observable?
각각의 예는 두 사례를 이해하는 데 도움이 될 것입니다.각 사례를 사용할 수 있는 시나리오는 무엇입니까?
약속.
A Promise비동기 작업이 완료되거나 실패할 때 단일 이벤트를 처리합니다.
참고: 있다니가 .Promise ES6는 ES6입니다.Promise아직은 아닙니다.
관찰 가능한
안 안Observable는 (여러 언어에서) 와 비슷하며 각 이벤트에 대해 콜백이 호출되는 0개 이상의 이벤트를 전달할 수 있습니다.
주자Observable보선는되보다 Promise의 특징을 제공하기 때문입니다.Promise기타 등등.와 함께Observable 1,. 0, 1은 이벤트를 처리하는 것입니다.각각의 경우 동일한 API를 사용할 수 있습니다.
Observable또한 보다 유리합니다.Promise취소할 수 있습니다.서버에 대한 HTTP 요청 또는 다른 값비싼 비동기 작업의 결과가 더 이상 필요하지 않다면,Subscription상당한Observable을 취소할 수 , 을 사용하면 구독을 취소할 수 있습니다.Promise사용자가 더 이상 통지나 제공하는 결과가 필요하지 않은 경우에도 최종적으로 성공 또는 실패한 콜백을 호출합니다.
그러는 동안에Promise되며, " 즉시합다니작"입니다.Observable구독한 경우에만 시작됩니다.이것이 관찰 가능한 것들이 게으르다고 불리는 이유입니다.
Observable은 다음과 같은 연산자를 제공합니다.map,forEach,reduce 배열과 유사함
다음과 같은 강력한 연산자도 있습니다.retry()또는replay()...그것들은 종종 꽤 유용합니다.rxjs와 함께 제공된 연산자 목록
게으른 실행은 더 선언적인 종류의 프로그래밍을 하기 위해 구독을 통해 관찰 가능한 것이 실행되기 전에 연산자 체인을 구축할 수 있게 합니다.
둘다요.Promises그리고.Observables애플리케이션의 비동기적 특성을 처리하는 데 도움이 되는 추상화를 제공합니다.그들 사이의 차이점은 귄터와 렐루에 의해 명확하게 지적되었습니다.
코드 조각은 천 단어의 가치가 있으므로 아래 예제를 통해 이해해 보겠습니다.
@Christoph Burgdorf 멋진 기사에 감사드립니다.
Angular는 HTTP를 처리하기 위한 약속 대신 Rx.js Observables를 사용합니다.
입력할 때 즉시 결과를 표시하는 검색 기능을 구축하고 있다고 가정합니다.친숙하게 들리지만, 그 과제와 함께 오는 많은 과제들이 있습니다.
- 사용자가 키를 누를 때마다 서버 끝점을 누르고 싶지 않습니다.그것은 그들을 HTTP 요청의 폭풍으로 넘쳐나게 할 것입니다.기본적으로, 우리는 모든 키 입력 대신 사용자가 입력을 중지한 후에만 입력하기를 원합니다.
- 후속 요청에 대해 동일한 쿼리 매개 변수로 검색 끝점을 누르지 마십시오.
- 순서가 잘못된 응답을 처리합니다.여러 요청이 동시에 기내에 있을 때 예상치 못한 순서로 돌아오는 경우를 고려해야 합니다.우리가 먼저 컴퓨터를 입력하고, 멈추면, 요청이 나가고, 우리가 자동차를 입력하고, 멈추면, 요청이 나간다고 상상해보세요.이제 우리는 두 가지 요청을 받고 있습니다.안타깝게도 컴퓨터에 대한 결과를 전달하는 요청은 자동차에 대한 결과를 전달하는 요청 이후에 다시 전송됩니다.
는 단순히 두의 파일로 됩니다: 데는두개구성다니됩로파일의.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]);
}
}
우리는 주사를 놓을 것입니다.Jsonp지정된 검색어로 Wikipedia API에 대해 GET 요청을 하는 서비스입니다.전화하는 것을 주의하십시오.toPromise에서 얻기 위해Observable<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).
위키백과 서비스의 검색 방법이 반환하는 Promise의 결과를 풀고 템플릿에 문자열의 단순 배열로 노출하여 다음을 수행할 수 있도록 합니다.*ngFor우리를 위해 목록을 작성해 주세요.
Plunker에서 Promise 기반 구현의 예를 참조하십시오.
관찰할 수 있는 것들이 정말 빛나는 곳
키 입력 시마다 엔드포인트를 망치질하지 않고 사용자가 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을 사용하여 "용어"라는 이름으로 설정할 수 있습니다.
<input type="text" [formControl]="term"/>
구성 요소에서는 구성요소다같인만듭다니를스스의 .FormControl@angular/form그리고 그것을 우리 부품의 이름 용어로 필드로 노출시킵니다.
배후에서 용어는 자동으로 다음을 노출합니다.Observable<string>valueChanges우리가 구독할 수 있는.이제 저희가.Observable<string>은 사자입을극는복것하은전화다거쉽니습것는만큼를용력▁calling▁easy다▁over니를 부르는 것만큼 쉽습니다.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 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));
}
}
응용 프로그램에서 이미 결과를 보여주는 검색어에 대한 다른 요청을 보내는 것은 리소스 낭비입니다.원하는 동작을 달성하기 위해 우리가 해야 할 일은 전화를 거는 것입니다.distinctUntilChanged가 전화한 직후에 교환원.debounceTime(400)
Plunker에서 관찰 가능한 구현 예제 참조
고장난 응답에 대한 자세한 내용은 문서 전문 http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html 을 참조하십시오.
Angular에서 HTTP를 사용하는 한, 일반적인 사용 사례에서 Observable over Promise를 사용할 때 큰 차이가 없다는 것에 동의합니다.여기서는 실제로 어떤 이점도 관련이 없습니다.앞으로 고급 사용 사례를 볼 수 있기를 바랍니다 :)
더 배우기
Promise와 Observables 모두 JavaScript의 비동기 기능으로 작업하는 데 도움이 될 것입니다.그것들은 많은 경우에 매우 유사하지만, 여전히 둘 사이에 약간의 차이가 있습니다, 약속은 해결될 가치입니다.asynchronousHTTP 통화와 같은 방법.반면에 관찰 가능한 항목은 일련의 비동기 이벤트를 처리합니다.이들 간의 주요 차이점은 다음과 같습니다.
약속:
- 파이프라인이 하나인
- 일반적으로 비동기 데이터 반환과 함께만 사용합니다.
- 취소하기 쉽지 않은
관찰 가능:
- 취소할 수 있습니다.
- 재시도 및 재시도와 같이 기본적으로 재시도 가능언제
- 여러 파이프라인으로 데이터 스트리밍
- 지도, 필터 등과 같은 배열과 같은 작업을 수행합니다.
- 이벤트와 같은 다른 소스에서 생성될 수 있습니다.
- 나중에 구독할 수 있는 기능입니다.
또한 차이점을 시각적으로 보여주기 위해 아래 그래픽 이미지를 만들었습니다.
답에 관측치가 누락된 단점이 하나 있습니다.약속을 통해 ES7 비동기/대기 기능을 사용할 수 있습니다.이를 통해 동기 함수 호출처럼 비동기 코드를 작성할 수 있으므로 콜백이 더 이상 필요하지 않습니다.관찰할 수 있는 유일한 방법은 이를 약속으로 변환하는 것입니다.그러나 이를 약속으로 변환할 때는 하나의 반환 값만 다시 가질 수 있습니다.
async function getData(){
const data = await observable.first().toPromise();
//do stuff with 'data' (no callback function needed)
}
자세한 내용:Rx Observable에서 어떻게 '기다릴' 수 있습니까?
약속들
- 정의:함수를 비동기적으로 실행하고 함수의 반환 값(또는 예외)을 사용할 수 있습니다. 단, 실행 시에는 한 번만 사용할 수 있습니다.
- 게으르지 않음
- 취소할 수 없습니다(취소를 지원하는 Promise 라이브러리가 있지만 ES6 Promise는 아직 지원하지 않습니다).두 가지 가능한 결정은 다음과 같습니다.
- 거부
- 해결하다
- 재시도할 수 없음(약속은 재시도 기능을 가지겠다는 약속을 반환한 원래 기능에 액세스할 수 있어야 합니다. 이는 잘못된 관행입니다.)
관찰 가능한 항목
- 정의:함수를 비동기적으로 실행하고 실행할 때 함수의 반환 값을 연속 시퀀스(여러 번)로 사용할 수 있도록 지원합니다.
- 기본적으로 시간이 경과할 때 값을 방출하기 때문에 게으릅니다.
- 코딩 작업을 단순화하는 연산자가 많습니다.
- 한 연산자 재시도를 사용하여 필요할 때마다 재시도할 수 있으며, 일부 조건에 따라 관찰 가능한 재시도가 필요한 경우에도 재시도할 수 있습니다.사용할 수 있는 시기.
참고: 운영자 목록과 대화식 다이어그램은 **RxMarbles.com **에서 확인할 수 있습니다.
약속 및 관찰 가능 항목은 모두 비동기 호출만 처리합니다.
다음은 이들 간의 차이점입니다.
관찰 가능한
- 일정 기간 동안 여러 값을 내보냅니다.
- 관찰 가능 항목에 가입할 때까지 호출되지 않습니다.
- 구독 취소() 방법을 사용하여 취소할 수 있습니다.
- 각에 대해 필터링, 축소, 재시도 및 재시도 맵을 제공합니다.연산자의 경우
약속.
한 번에 하나의 값만 내보냅니다.
.then 및 .catch 없이 서비스를 호출합니다.
취소할 수 없습니다.
연산자를 제공하지 않습니다.
여러분이 해변에 가고 싶다고 가정해 보겠습니다.당신은 날씨에 따라 결정을 내려야 합니다.세 가지 방법이 있습니다.
밖을 보고 빗방울을 보면 마음이 변합니다.이것은 동기화된 작업입니다.하던 일을 멈추고 밖을 확인하러 가서 결과를 얻은 다음 다시 하던 일로 돌아갔습니다.
당신은 당신의 옆에 있는 당신의 형에게 오늘의 날씨 상태를 확인해 달라고 요청합니다.그가 날씨를 확인하는 동안, 당신은 여전히 당신이 하던 일을 계속합니다.비동기 작업입니다.당신은 동생에게 과제를 주고 약속이 해결되기를 기다리고 있습니다.이 경우 하나의 응답을 수신하고 응답을 수신한 후에는 더 이상 업데이트를 수신하지 않습니다.
이번에는 라디오를 켜고 24시간 내내 날씨 상황을 방송하는 기상 채널을 청취합니다.이 시나리오에서는 단일 응답을 받는 대신 응답이 진행 중입니다.▁a▁like와 같습니다.
subscription완전히observable관측 가능한 것은 "날씨"이고 구독은 "당신을 계속 업데이트하는 라디오 신호"입니다.라디오가 켜져 있는 한 사용 가능한 모든 업데이트를 받을 수 있습니다.라디오를 끌 때까지 어떤 정보도 놓치지 않습니다.당신이 라디오를 끌 때, 그것은 "당신이 구독하지 않았다는 것을 의미합니다.
저는 아래의 차이점을 요약했습니다.
관찰 가능:
- 관측 가능은 a를 가져다가 반환하는 것일 뿐입니다.
- 관찰자는 데이터 스트림에 다음 값을 관찰자, 관찰자에게 방출하고 관찰자에게 관찰자에 대한 정보를 제공합니다.
- Observer는 , 오류 및 스트림 종료(UI 이벤트, http 응답, 웹 소켓이 있는 데이터)를 제공합니다.
- 시간 경과에 따른 작업
- , 등의 연산자를 지원합니다.
- 관찰할 수 있는 항목을 만들면 -Observer Observable.create() -에서 메서드를 호출할 수 있는 관찰할 수 있는 항목을 반환합니다. -Observer Observable.from Event() -Observer Observable.from Event() - 이벤트를 관찰할 수 있는 항목으로 변환합니다.from Promise() - Promise를 Observable -Observable.range()로 변환 - 지정된 범위의 정수 시퀀스를 반환합니다
약속:
약속은 미래에 끝날 과제를 나타냅니다.
약속이 됩니다;
약속은 예외에 의해 거부됩니다.
아니요 그리고 그것은 돌아옵니다.
약속은 함수를 노출시킵니다.
- 그런 다음 새를 반환합니다;
- 다음을 기준으로 실행될 에 대한 평가.
실행
handlers대상:
방금 약속이 최선의 해결책인 문제를 다루었는데, 이 문제가 유용할 경우 이 문제를 발견한 모든 사람들을 위해 이 문제를 공유합니다(이것이 바로 제가 이전에 찾던 대답이었습니다).
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가 해결되면 반환 값은 .then 블록의 데이터 변수에 있습니다.첫 번째 ValList 변수입니다.함수가 데이터를 반환했기 때문에 서비스가 완료되었으며 두 번째 listCode로 다시 호출해도 안전합니다. 반환 값은 다음 .에 있는 데이터 변수에 있습니다. 그런 다음 차단하고 이에 할당합니다.두 번째 ValList 변수입니다.
모든 변수를 채우기 위해 필요한 횟수만큼 이를 연결할 수 있으며 마지막 코드 블록에서는 반환문을 생략하고 블록이 종료됩니다.
이는 구성 요소를 초기화할 때 여러 번 호출해야 하는 단일 서비스가 있고, 서비스가 가져오기를 완료하고 값을 반환해야 다시 호출할 수 있는 매우 구체적인 사용 사례이지만, 이 경우 Promise / .then 방법이 이상적이었습니다.
저는 다른 모든 대답들이 당신의 의심을 풀어줄 것이라고 믿습니다.그럼에도 불구하고, 저는 관찰 가능한 것들이 기능적인 프로그래밍에 기반을 두고 있다는 것을 덧붙이고 싶었습니다. 그리고 저는 지도, 플랫맵, 축소, 압축과 같은 기능들이 매우 유용하다고 생각합니다.웹이 특히 API 요청에 의존할 때 일관성을 달성하는 것은 잔인한 개선입니다.
이 문서는 반응형 X의 공식 문서이며 가장 명확한 문서라고 생각하기 때문에 이 문서를 강력히 추천합니다.
관찰 가능한 내용에 대해 알아보려면 다음 3부로 구성된 게시물을 추천합니다. http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/
비록 RxJava를 위한 것이지만, 개념은 같고, 정말 잘 설명되어 있습니다.반응형 X 문서에서는 각 함수에 대한 동등성을 가집니다.RxJS를 찾아야 합니다.
개요:
- Promise와 Observable 모두 비동기 작업을 처리하는 데 도움이 됩니다.이러한 비동기 작업이 완료되면 특정 콜백을 호출할 수 있습니다.
- 약속은 하나의 이벤트만 처리할 수 있습니다. 관찰 가능 항목은 시간 경과에 따른 이벤트 스트림에 대한 것입니다.
- 약속은 일단 보류된 후에는 취소할 수 없습니다.
- 관측치에서 방출되는 데이터는 연산자를 사용하여 변환할 수 있습니다.
관찰 가능한 항목에는 약속이 제공하는 모든 기능(+추가)이 있으므로 항상 비동기 동작을 처리하는 데 관찰 가능한 항목을 사용할 수 있습니다.그러나 관찰할 수 있는 추가 기능이 필요하지 않을 수도 있습니다.그러면 라이브러리를 가져와 라이브러리를 사용하는 것은 추가적인 오버헤드입니다.
약속 사용 시기:
결과를 처리할 단일 비동기 작업이 있는 경우 약속을 사용합니다.예:
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()메서드가 호출됩니다.때, 약속상거면되부가태,면▁when▁the▁state▁is,거,catch()메서드가 호출됩니다.
관찰 가능한 항목을 사용하는 경우:
시간이 지남에 따라 처리해야 하는 데이터 스트림이 있는 경우 관측 가능 항목을 사용합니다.스트림은 시간이 지남에 따라 사용 가능하게 되는 일련의 데이터 요소입니다.스트림의 예는 다음과 같습니다.
- 사용자 이벤트(예: 클릭 또는 키업 이벤트).사용자는 시간이 지남에 따라 이벤트(데이터)를 생성합니다.
- 웹 소켓은 클라이언트가 서버에 웹 소켓을 연결한 후 시간이 지남에 따라 데이터를 푸시합니다.
관찰 가능 항목 자체는 다음 이벤트 발생, 오류 발생 또는 관찰 가능 항목이 완료된 시점을 지정합니다.그런 다음 이 관찰 가능 항목을 구독하면 활성화되고 이 구독에서는 콜백을 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
관찰 가능한 것을 만들 때는 관찰자를 인수로 제공하는 콜백 함수가 필요합니다. 관찰자는 이관자게전걸화수있다니습를에찰다있니▁on,▁call라고 부를 수 있습니다.onNext,onCompleted,onError그런 다음 관찰 가능 항목이 구독되면 구독에 전달된 해당 콜백을 호출합니다.
약속:
- 단일 미래 가치 제공
- 게으르지 않음;
- 취소 불가;
관찰 가능:
- 시간이 지남에 따라 여러 값을 방출합니다.
- 게으른;
- 취소 가능;
- 지도, 필터, 축소 및 유사 연산자 지원
원하는 경우 Angular에서 HTTP를 호출할 때 관찰 가능한 항목 대신 약속을 사용할 수 있습니다.
약속 대 관측 가능한 유사성 먼저
둘 다 비동기 코드를 처리하는 데 사용됩니다.
약속 예문을 찾아보세요.약속 생성자는 일부 비동기 작업이 완료될 때 어느 정도의 값으로 호출될 해결 참조 함수를 전달합니다.
const promise = new Promise(resolve => { setTimeout(() => { resolve("Hello from a Promise!"); }, 2000); }); promise.then(value => console.log(value));이제 관찰 가능한 예입니다.여기서 우리는 또한 비동기 작업을 처리할 관찰자인 관찰자에게 함수를 전달합니다.약속의 결의와는 달리 다음과 같은 방법으로 대신 가입합니다.
둘 다 비동기 작업을 처리합니다.이제 차이점을 살펴보겠습니다.
const observable = new Observable(observer => { setTimeout(() => { observer.next('Hello from a Observable!'); }, 2000); }); observable.subscribe(value => console.log(value));
약속 대 관측 가능한 차이
약속.
- 단일 값을 확인하거나 거부하며 한 번에 단일 값 비동기 작업을 처리할 수 있습니다.
- 약속은 일단 완료된 비동기 값을 해결하면 더 이상 사용할 수 없습니다. 단 한 번만 사용하면 여기서 부족합니다.
- 취소 불가
- 연산자에 대한 rxjs 지원이 없습니다.
관찰 가능한
여러 비동기 값을 내보낼 수 있습니다.
이벤트 또는 값의 스트림을 처리하는 데 사용됩니다.수많은 태스크 또는 값 배열이 있으며 값이 이에 삽입될 때마다 값이 자동으로 처리되어야 합니다.이 배열에 값을 넣을 때마다 해당하는 모든 구독자는 자동으로 최신 값을 받게 됩니다.
관찰 가능한 항목은 입력 변경, 반복 간격, 모든 하위 구성 요소에 대한 브로드캐스트 값, 웹 소켓 푸시 알림 등을 관찰하는 데 유용합니다.
구독 취소 방법을 사용하여 언제든지 취소할 수 있습니다.
rxjs 연산자에 대한 지원을 약속하는 마지막 좋은 부분이 하나 더 있습니다.구독하기 전에 관찰 가능한 데이터를 변환하기 위해 맵, 필터, switchMap, combineLatest 등과 같은 많은 파이프 연산자가 있습니다.
약속 - 단일 미래 값을 제공합니다.게으르지 않습니다.취소할 수 없습니다.거부하거나 해결합니다.
관측 가능 - 여러 개의 미래 값을 제공합니다.게으르군요 취소 가능합니다.맵, 필터링 및 축소와 같은 다른 방법을 제공합니다.
약속은 단일 값을 내보내는 반면 관측 가능은 여러 값을 내보냅니다.따라서 HTTP 요청을 처리하는 동안 Promise는 동일한 요청에 대한 단일 응답을 관리할 수 있지만, 동일한 요청에 대한 응답이 여러 개인 경우에는 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 3
단답:
관찰 가능한 것이 더 좋습니다.모든 Promise 기능과 추가 기능이 있습니다.
긴 답변:
약속:
- "데이터 한 번 반환"을 한 번 사용합니다.
- 취소 불가
- 청취자 1명
- 소켓 지원 없음
관찰 가능한 항목:
- 데이터 변경 시 여러 번 데이터 반환
- 지원 취소
- 지지 소켓
- 많은 수신기 지원 및 데이터 변경 시 알림
- 지원 맵, 필터링 및 축소
약속은 비동기 작업이 완료되거나 실패할 때 단일 이벤트를 내보냅니다.
관찰 가능 항목은 스트림과 유사하며(여러 언어로) 모든 이벤트에 대해 콜백이 필요한 0개 이상의 이벤트를 전달할 수 있습니다.
Frequently Observable은 Promise 등의 하이라이트를 제공하기 때문에 Promise보다 선호됩니다.관찰 가능한 경우 0, 1 또는 다양한 이벤트를 처리해야 하는지 여부는 중요하지 않습니다.사례별로 유사한 API를 사용할 수 있습니다.
약속: 약속은 단일 값을 방출합니다.
예:
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
우리는 일정 기간 동안 여러 값을 방출하는 스트림과 같은 관측 가능한 것을 생각할 수 있으며, 관측 가능한 것으로 동일한 API를 사용하여 비동기 데이터를 처리할 수 있도록 각 항목에 대해 동일한 콜백 기능이 호출됩니다.데이터가 일정 기간 동안 단일 값으로 전송되는지 또는 여러 값으로 전송되는지 여부를 나타냅니다.
약속:
- 약속은 게으르지 않습니다
- 약속을 취소할 수 없습니다.
관찰 가능:
- 관찰 가능한 항목은 게으릅니다."관측 가능"이 느립니다.구독하기 전까지는 호출되지 않습니다.
- Unsubscribe() 메서드를 사용하여 관찰 가능한 항목을 취소할 수 있습니다.
- 관찰 가능한 추가 기능은 각 맵에 대해 필터링, 축소, 재시도, 재시도와 같은 많은 강력한 연산자를 제공합니다.등이 있을 때
- 약속은 열망하는 반면 관찰 가능한 것은 게으릅니다.
- 약속은 항상 비동기식인 반면, 관찰 가능한 약속은 동기식이거나 비동기식일 수 있습니다.
- 는 단일할 수 , 은 Promise 단 값 제 공 수 있 반 면 는 은 할 Observable 는
값의 스트림(0 ~ 여러 값)입니다. - RxJS 연산자를 관찰 가능한 항목에 적용하여 새 맞춤형 스트림을 얻을 수 있습니다.
Promise와 Observable 모두 비동기 작업을 처리하는 데 도움이 됩니다.이러한 비동기 작업이 완료되면 특정 콜백을 호출할 수 있습니다.
Angular는 HTTP를 처리하기 위한 약속 대신 RxJS의 Observables를 사용합니다.
Below are some important differences in promises & Observables.
튜토리얼과 설명서를 처음 읽었을 때 분명하지 않았던 것은 멀티캐스팅의 아이디어였습니다.
기본적으로 여러 개의 구독이 관찰 가능한 항목에서 여러 개의 실행을 트리거합니다.콜 다중 은 "" HTTP " " " " " " " " " " " " " " " " " " " " " " " " " " " 을 사용하지 한 여러 을 트리거합니다..share()(멀티캐스팅 사용).
약속은 한 번에 한 가지 일을 처리하고, 데이터 포장을 풀고, 예외를 처리하고, 비동기/대기와 같은 멋진 것에 대한 언어 지원을 제공하며, 그 외에는 거의 아무것도 하지 않습니다.
관찰할 수 있는 항목에는 많은 벨과 휘파람이 있지만 사용 중인 전원을 이해해야 합니다. 그렇지 않으면 잘못 사용될 수 있습니다.
약속:
비동기 이벤트 처리기 - 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);
약속 정보:
파이프라인이 하나이므로 호출될 때 한 번만 값을 반환합니다.일방통행 처리기라 한번 전화가 오면 취소가 안 될 수도 있습니다.()와 ()를 차례로 재생할 수 있는 유용한 구문입니다.
관찰 가능한 항목:
관측 가능한 값은 시간이 지남에 따라 여러 값의 게으른 집합입니다.이것은 비동기식 운영을 위한 정말 훌륭한 접근법입니다.크로스 플랫폼 지원이 가능한 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));
다중 파이프라인을 지원하므로 다른 위치에서 결과를 구독할 수 있습니다.
그것은 약속보다 더 많은 가능성을 가지고 있습니다.
용도:
지도, 필터, 파이프, 지도, concatMap 등 더 많은 가능성을 가지고 있습니다.
다음은 약속 및 관찰 가능한 항목의 중요한 차이점입니다.
약속.
- 단일 값만 내보냅니다.
- 취소 불가
- 공유 불가
- 항상 비동기식
관찰 가능한
- 여러 값을 내보냅니다.
- 호출되거나 다른 사용자가 구독 중인 경우에만 실행됩니다.
- 취소 가능
- 여러 가입자가 해당 공유 값을 공유하고 가입할 수 있습니다.그리고 모든 구독자는 한 시점에 실행됩니다.
- 비동기식일 가능성이 있는
자세한 내용은 https://stackblitz.com/edit/observable-vs-promises 을 참조하십시오.
저는 많은 사람들이 관찰 가능한 것이 "취소 가능"이라는 주장을 사용하는 것을 보지만, 약속을 "취소 가능"으로 만드는 것은 다소 사소한 일입니다.
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 200Promise:는 생성 시 즉시 실행되는 비동기 코드를 처리하는 ES6 기능으로, 생성 시 단일 값만 내보낼 수 있으며 취소할 수 없습니다.현대적인 응용 프로그램과 기능 요구의 복잡성으로 인해 동시에 많은 약속을 실행하거나 실행 전에 필터링하거나 변환을 수행하는 경우 복잡한 코드를 구현해야 합니다.
myPromise.then((resolvedValue) => {
console.log(resolvedValue);
}, (error) => {
console.log(error);
});
Observable: 는 Rxjs 라이브러리에서 제공하는 Object로 JavaScript 응용 프로그램에서 반응형 프로그래밍으로 작업할 수 있습니다. 이는 취소할 수 있는 이점이 있는 복잡한 응용 프로그램을 처리할 수 있는 체인 및 구독을 제공하여 동시에 많은 값을 제공합니다.또한, 복잡한 사용 사례 및 많은 사용자 인터페이스를 처리하는 데 도움이 되는 , , , 등과 같은 다른 운영자의 체인을 적용함으로써 이점을 얻을 수 있습니다.
인스턴트 검색의 예:
search(terms: Observable<string>) {
return terms.pipe(
debounceTime(400),
distinctUntilChanged(),
switchMap((term) => this.searchEntries(term))
);
}
병렬로 연결된 많은 API 호출의 예:
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]);
});
약속은 단일 값 또는 해결에만 초점이 맞춰져 있습니다.관측 가능한 데이터는 데이터 스트림입니다.
관찰 가능한 항목은 취소할 수 있지만 약속은 취소할 수 없습니다.
가장 잘 알려지지 않은 것은 적어도 나에게는 다음과 같습니다.
- 약속은 항상 비동기적이지만 관찰 가능한 것은 동기적일 수도 있고 비동기적일 수도 있습니다.
자세히 읽고 싶다면, 이 답변에 따라 블로그 글을 작성했습니다 - 자바스크립트에서 관찰 가능한 것과 약속의 4가지 차이점
한 가지 더 다른 점: 글로벌 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용 Reactive Extensions는 사용하기 전에 RxJS를 설치하고 가져와야 합니다.
import { Observable } from 'rxjs';
Günter Zöchbauer의 답변은 일반적으로 좋지만, Angular Components를 다룰 때 취소를 지원하기 때문에 거의 항상 관찰 가능 항목을 사용하기를 원한다는 점을 강조하지는 않는다고 생각합니다.약속은 취소할 수 없으며 구성 요소가 제거되더라도 해결됩니다.앵귤러는 그렇지 않을 때까지 용서하는 경향이 있습니다.
예를 들어, 손상된 구성 요소에 대한 수동 변경 탐지는 다음과 같은 예외를 발생시킵니다.
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();
});
}
약속이 해결되기 전에 구성 요소가 파괴된 경우에는attempt to use destroyed view약속이 해결될 때 오류가 발생합니다.
또는 takeUntil 패턴과 함께 관찰 가능한 항목을 사용하는 경우 구성 요소가 삭제되는 즉시 구독이 취소됩니다.
이것은 약간의 조작된 예이지만, 파괴된 구성 요소에 대해 코드를 실행하면 버그가 발생할 수 있습니다.
약속은 항상 비동기식인 반면, 관찰 가능한 약속은 동기식이거나 비동기식일 수 있습니다.관측 가능한 데이터는 데이터가 변경될 때 여러 번 반환됩니다.약속은 단일 값을 방출합니다.관측 가능한 값은 시간이 지남에 따라 여러 값의 게으른 집합입니다.이것은 비동기식 운영을 위한 정말 훌륭한 접근법입니다.약속은 게으르지 않습니다.관찰 가능한 항목은 구독 취소()를 사용하여 취소할 수 있습니다.약속은 취소할 수 없습니다.
약속은 비동기 작업이 완료되거나 실패할 때 단일 이벤트를 처리합니다.
약속은 응용프로그램에서 자동으로 실행되는 반면 관찰 가능한 항목은 게으릅니다.그래서 우리는 데이터를 반환하기 위해 관측 가능한 것들을 구독해야 합니다.
우리는 약속을 취소할 수 없습니다.구독을 취소할 수 있는 관찰 가능 항목과는 대조적으로 매번 실행됩니다.
관찰 및 약속은 JavaScript/TypeScript의 비동기 기능으로 작업하는 데 도움이 됩니다.그들은 많은 경우에 매우 유사하지만, 여전히 그들 사이에는 약간의 차이점이 있습니다.
언급URL : https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables
'programing' 카테고리의 다른 글
| Azure 응용 프로그램 설정이 내 appsettings.json 파일 값을 재정의하지 않음 (0) | 2023.05.02 |
|---|---|
| Python 3용 이미지 라이브러리 (0) | 2023.05.02 |
| 내 Mac에서 Xcode 버전을 기본값으로 설정하는 방법은 무엇입니까? (0) | 2023.05.02 |
| 웹 API 오류 - 이 요청이 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야 합니다. (0) | 2023.05.02 |
| SQL Server Management Studio 2012(SSMS) Express를 설치하는 방법은 무엇입니까? (0) | 2023.05.02 |