Angular 2: Convert Observable to Promise

Question

Q) How do I convert the following observable to a promise so I can call it with .then(...)?

My method I want to convert to a promise:

  this._APIService.getAssetTypes().subscribe(
    assettypes => {
        this._LocalStorageService.setAssetTypes(assettypes);
    },
    err => {
        this._LogService.error(JSON.stringify(err))
    },
    () => {}
  );

The service method it calls:

  getAssetTypes() {
    var method = "assettype";
    var url = this.apiBaseUrl + method;

    return this._http.get(url, {})
      .map(res => <AssetType[]>res.json())
      .map((assettypes) => {
        assettypes.forEach((assettypes) => {
          // do anything here you might need....
      });
      return assettypes;
    });      
  }

Thanks!

The Most answers below have [`toPromise()`](https://www.learnrxjs.io/operators/utility/topromise.html) operator, that has been deprecated in RxJS 5.5+ — Rohit Sharma, Sep 07 '18 at 20:32

Günter Zöchbauer · Accepted Answer · 2021-02-14T14:54:12.963

142

rxjs7

lastValueFrom(of('foo'));

https://indepth.dev/posts/1287/rxjs-heads-up-topromise-is-being-deprecated

rxjs6

https://github.com/ReactiveX/rxjs/issues/2868#issuecomment-360633707

Don't pipe. It's on the Observable object by default.
Observable.of('foo').toPromise(); // this

rxjs5

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

...

this._APIService.getAssetTypes()
.map(assettypes => {
  this._LocalStorageService.setAssetTypes(assettypes);
})
.toPromise()
.catch(err => {
  this._LogService.error(JSON.stringify(err));
});

edited Feb 14 '21 at 14:54

answered Apr 21 '16 at 18:08

Günter Zöchbauer

623,577
216
2,003
1,567

Get this error: [ts] Argument of type '(assettypes: any) => void' is not assignable to parameter of type 'PromiseConstructor'. Property 'all' is missing in type '(assettypes: any) => void'. (parameter) assettypes: any – Dave Apr 21 '16 at 18:28
What does `getAssetTypes()` return? – Günter Zöchbauer Apr 21 '16 at 18:29
an array of interface type AssetType – Dave Apr 21 '16 at 18:33
It needs to return an `Observable` for this to work. The code in your question also only works if it returns an `Observable` (to call `subscribe(...)` on it) – Günter Zöchbauer Apr 21 '16 at 18:35
I've updated my question with the service method that is called. thanks. – Dave Apr 21 '16 at 18:41
Ok, it returns an `Observable`. I updated my answer. – Günter Zöchbauer Apr 21 '16 at 18:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109848/discussion-between-dave-and-gunter-zochbauer). – Dave Apr 21 '16 at 18:50
2

@GünterZöchbauer has `import 'rxjs/operator/add/toPromise';` been changed to: `import 'rxjs/add/operator/toPromise';` ? – Zze Apr 24 '17 at 06:52
2

toPromise is deprecated. How would we do this now? – Jus10 Aug 03 '18 at 20:02
It's not. Please see my answer. – Emeric Jan 08 '20 at 15:13

Luca C. · Answer 2 · 2023-04-20T07:02:11.097

23

observable can be converted to promise like this:

import { firstValueFrom, lastValueFrom } from 'rxjs';
...
lastValueFrom(observable).then(lastValue=>...);
firstValueFrom(observable).then(firstValue=>...);

toPromise() was the previous solution, deprecated from RxJS 7, it was:

let promise=observable.toPromise();

edited Apr 20 '23 at 07:02

answered Jan 03 '18 at 11:46

Luca C.

11,714
1
86
77

If I conver this to promise I can also catch an error right? – KnowledgeSeeker Aug 17 '18 at 06:30
you can surround with try catch and even user promise.catch() – Luca C. Aug 17 '18 at 09:46
`toPromise` is now deprecated. – Pouriya Zarbafian Apr 18 '23 at 13:42

score 13 · Answer 3 · answered Nov 22 '16 at 11:08

13

you dont really need to do this just do ...

import 'rxjs/add/operator/first';


this.esQueryService.getDocuments$.first().subscribe(() => {
        event.enableButtonsCallback();
      },
      (err: any) => console.error(err)
    );
    this.getDocuments(query, false);

first() ensures the subscribe block is only called once (after which it will be as if you never subscribed), exactly the same as a promises then()

answered Nov 22 '16 at 11:08

danday74

52,471
49
232
283

Correct, the promise is only resolved at the time the observables completes, using .first() or .take(1) will ensure it's the case after the first emit. – Flavien Volken Jan 11 '18 at 09:27
The problem here is we cannot use `async/await` pattern. – Sampath Mar 14 '18 at 11:27
1

first().toPromise() will give you promise and then you can use async/await – Mohit Atray Dec 05 '19 at 13:25

score 13 · Answer 4 · answered Oct 08 '18 at 13:26

13

The proper way to make Observable a Promise, in your case would be following

getAssetTypesPromise() Observable<any> {
  return new Promise((resolve, reject) => {
      this.getAssetTypes().subscribe((response: any) => {
        resolve(response);
      }, reject);
    });
}

answered Oct 08 '18 at 13:26

Teodor Hirs

449
5
8

2

This can be further simplified to `return new Promise((resolve, reject) => this.getAssetTypes().subscribe(resolve, reject));` – mopo922 Dec 18 '18 at 16:34

Emeric · Answer 5 · 2021-11-23T21:05:08.213

Edit:

.toPromise() is now deprecated in RxJS 7 (source: https://rxjs.dev/deprecations/to-promise)

New answer:

As a replacement to the deprecated toPromise() method, you should use one of the two built in static conversion functions firstValueFrom or lastValueFrom.

Example:

import { interval, lastValueFrom } from 'rxjs';
import { take } from 'rxjs/operators';
 
async function execute() {
  const source$ = interval(2000).pipe(take(10));
  const finalNumber = await lastValueFrom(source$);
  console.log(`The final number is ${finalNumber}`);
}
 
execute();
 
// Expected output:
// "The final number is 9"

Old answer:

A lot of comments are claiming toPromise deprecated but as you can see here it's not.

So please juste use toPromise (RxJs 6) as said:

//return basic observable
const sample = val => Rx.Observable.of(val).delay(5000);
//convert basic observable to promise
const example = sample('First Example')
  .toPromise()
  //output: 'First Example'
  .then(result => {
    console.log('From Promise:', result);
  });

async/await example:

//return basic observable
const sample = val => Rx.Observable.of(val).delay(5000);
//convert basic observable to promise
const example = await sample('First Example').toPromise()
// output: 'First Example'
console.log('From Promise:', result);

Read more here.

Note: Otherwise you can use .pipe(take(1)).toPromise but as said you shouldn't have any problem using above example.

it is deprecated and might be removed in v8. your link is for v6. — Soroush Falahati, Nov 06 '21 at 16:33

score 5 · Answer 6 · edited Jul 23 '20 at 17:53

toPromise is deprecated in RxJS 7.

Use:

lastValueFrom

Used when we are interested in the stream of values. Works like the former toPromise

Example

public async getAssetTypes() {
  const assetTypes$ = this._APIService.getAssetTypes()
  this.assetTypes = await lastValueFrom(assetTypes$);
}

firstValueFrom

Used when we are not interested in the stream of values but just the first value and then unsubscribe from the stream

public async getAssetTypes() {
  const assetTypes$ = this._APIService.getAssetTypes()
  this.assetTypes = await firstValueFrom(assetTypes$); // get first value and unsubscribe
}

score 0 · Answer 7 · answered Nov 21 '20 at 07:15

0

You can convert Observable to promise just by single line of code as below:

let promisevar = observable.toPromise()

Now you can use then on the promisevar to apply then condition based on your requirement.

promisevar.then('Your condition/Logic');

answered Nov 21 '20 at 07:15

Nikunj Kakadiya

2,689
2
20
35

Divek John · Answer 8 · 2022-12-31T05:50:07.097

I like it raw so this one since toPromise() is no more

   const status = await new Promise<boolean>((resolve, reject) => {
     someObs$.subscribe({
      next: resolve,
      error: reject,
    });
  });

A sophisticated way is using https://rxjs.dev/api/index/function/lastValueFrom

  const replyTo = new AsyncSubject();

  replyTo.next(false);
  replyTo.next(false);
  replyTo.next(true);

  replyTo.complete();

  const status = await lastValueFrom(replyTo) // true

Angular 2: Convert Observable to Promise

8 Answers8

Linked

Related