toPromise? firstValueFrom? lastValueFrom?

RxJS 7으로 가면서, toPromise() 메소드에 변경점이 생기고, 대체 메소드들이 나왔다.

어떻게 변했는지 살펴보자.

 

일단 toPromise() 메소드는 Observable을 Promise와 같이 동작하도록 해주는  RxJS Operator다.

	Observable	Promise
공통점	비동기를 처리하는 방식으로, 시간이 지남에 따라 값을 방출한다.
차이점	값을 생성하지 않거나, 하나 이상의 값을 방출할 수 있다.	resolve될 때, 그때의 값만 한번 방출할 수 있다.

Observable이 값을 방출하지 않는 사실을 반영하기 위해, RxJS 7에서는 toPromise() 메소드의 반환 형태를 Promise<T>에서 Promise<T | undefined>로 변경했다.

RxJS 6 toPromise(): Promise<T>  → RxJS 7 toPromise(): Promise<T | undefined>

 

또한, 기존 toPromise() 메소드는 Observable이 시간이 지남에 따라 여러값을 생성할 수 있는 것에 대응되지 않았다. Promise로 변경될 때 첫번째 값 또는 마지막 값중에 선택해야 했다.

 

이 모든 문제를 해결하기 위해 Promise로 변환하기 위한 두가지 새로운 함수를 도입하였고, 이 두 함수가 lastValueFrom과 firstValueFrom 이다. toPromise() 메소드는 추후 없어질 예정

 

	lastValueFrom	firstValueFrom
Observable이 완료되어야 하는가?	O	X
사용하는 값	마지막 값	첫번째 값 * 값을 받고 즉시 구독을 취소한다.
완료되었을 때 값이 없으면?	reject / EmptyError 발생	reject / EmptyError 발생
Observable에 오류가 발생했으면?	reject / Error 발생
주의사항	Observable이 끝난다는 걸 확실히 알 때만 사용할 것	Observable이 적어도 하나의 값을 방출하거나, 끝난다는 것을 알 때만 사용할 것

주의사항에 어긋나는 경우, 중단된 Promise로 끝나면서, 잠재적으로 비동기 함수의 모든 상태가 메모리에 남는다.
이 상황을 막기 위해 timeout, take, takeWhie, takeUntil 등을 사용해야 한다.

 

완료되었을 때 값이 없는걸로 EmptyError 발생하는 것이 싫다면, 두번째 인자로 기본값을 넣어주면 된다.

import { firstValueFrom, EMPTY } from 'rxjs';

const result = await firstValueFrom(EMPTY, { defaultValue: 0 });
console.log(result);

// Expected output:
// 0

Observable이 방출된 값이 없을 때 종료되면 DefaultValue로 지정한 값이 방출되고, EmptyError가 발생하지 않는다.

 

 

참고사이트

https://rxjs.dev/deprecations/to-promise