Menu
In the following example toPromise does not work:
https://jsfiddle.net/tossp/nmf9jg32/
My code:
function getPostData() {
return fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
}
var source = Rx.Observable.fromEvent(document.body, 'click');
var example = source.concatMap(
e => Rx.Observable.from(getPostData()),
(e, res, eIndex, resIndex) => res.title);
example.subscribe({
next: (value) => { console.log('subscribe!!!',value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
example.do((value)=>console.log('do!!!',value)).toPromise().then((value)=>console.log('toPromise!!!',value));
810
As mentioned here, these are the main reasons why toPromise is being deprecated: One goal was to remove it from the Observable prototype and turn it into a standalone util function. The naming of toPromise is not the best. Especially when used in combination with await it does not read very well: await categories$.
toPromise method is Promise object. In order to use async/await style, you need at first wrap your code with async function, by prepending async keyword to function, and then with await keyword tell your code to wait for async operation. In your case it's http request.
The toPromise function lives on the prototype of Observable and is a util method that is used to convert an Observable into a Promise . Inside this function we subscribe to the Observable and resolve the Promise with the last emitted value - attention - when the Observable completes!
How to Convert an Observable to a Promise in Angular? Since the get method of HttpClient returns an observable, we use the toPromise() method to convert the observable to a promise. Since you can convert an observable to a promise, you can make use of the async/await syntax in your Angular code.
In RxJS 7 toPromise is deprecated and with RxJS 8 it will be removed. We need to start using lastValueFrom or firstValueFrom - which both returns a ` Promise `. Don't forget to import {...} from "rxjs". Lastly, avoid ` toPromise ` and start using ` lastValueFrom or firstValueFrom `.
but toPromise () is deprecated in recent versions of angular / rxjs. /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}.
The naming of toPromise is not the best. The type information of toPromise is wrong. When the source Observable completed without ever emitting a single value - it resolved with undefined. It should reject in that case. A Promise is a "promise" that when it resolves a value will be there - and be it undefined.
It can't be used within the pipe function. The toPromise function lives on the prototype of Observable and is a util method that is used to convert an Observable into a Promise. Inside this function we subscribe to the Observable and resolve the Promise with the last emitted value - attention - when the Observable completes!
Already solved https://github.com/ReactiveX/rxjs/issues/2536
toPromise is essentially observable.last().subscribe()
If you add .take(1) just before you call toPromise then things will start to work.
ie
example.do((value)=>console.log('do!!!',value)).take(1).toPromise()
In newer versions you must use take(1) inside pipe(). I did this kind of code:
async getPromise() {
return await example
.pipe(take(1))
.toPromise();
}
Hope it helps someone.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
