How to convert an observable to Promise after pipe()

Question

I have an async function that fetch data. In order to manipulate the data returned, I used from() to convert the Promise to an observable and use pipe() to manipulate the data. Is is possible to convert it back to Promise after pipe()? I have tried the following but it didn't work:

    getOrder() {

        return from(asyncFunctionToGetOrder())
               .pipe(map(data) =>
                   //Processing data here
                   return data;
                ))
                .toPromise(); //This won't work

    }

maybe this can help you [click me](https://stackoverflow.com/a/36777294/12163165) — user12163165, Aug 31 '20 at 21:48
if you start with promise and end with promise, why not just do your data processing in `.then()` block and skip observables altogether? — BizzyBob, Aug 31 '20 at 21:50
@BizzyBob: It says `toPromise()` is not a function. It looks like I cannot chain `toPromise()` to `pipe()`. The reason why I didn't want to process it inside the `.then()` was because I wanted to separate the data retriever function from the rest of the application - I would like to transform and change part/all the data before returning it. — timthekoder, Aug 31 '20 at 22:37
@user3622260 But separating the data retriever function in `getOrder()` is exactly what you'd do even if you used `return asyncFunctionToGetOrder().then(data => { /* Processing data here */ return data; })` to implement it. Why do you think you can't use `then`? — Bergi, Sep 01 '20 at 00:02
"It looks like I cannot chain toPromise() to pipe()" - This is not correct. `.pipe()` just returns an observable, so `toPromise()` works. I see your sample code is invalid (misplaced paren, missing curly braces), so maybe the error you are seeing is the really the cause of a syntax error. — BizzyBob, Sep 01 '20 at 01:47

score 0 · Answer 1 · edited Aug 31 '20 at 23:25

0

I don't know why you want to return promise, why cannot you convert to promise while fetching data, see this:

this.getOrder()
  .toPromise()
  .then((response:any) => {
    this.records = response;
  }).catch(error => {
     console.log(error)
  }).finally(() => {
    // code to cleanup
  });

edited Aug 31 '20 at 23:25

Dharman

30,962
25
85
135

answered Aug 31 '20 at 23:19

Ali Adravi

21,707
9
87
85

score 0 · Answer 2 · answered Sep 01 '20 at 06:48

0

Without Observable:

getOrder() {
  return asyncFunctionToGetOrder().then(
    (data) => {
      // Processing data here
      return Promise.resolve(data);
    }
  );
}

answered Sep 01 '20 at 06:48

MoxxiManagarm

8,735
3
14
43

score 0 · Answer 3 · answered Sep 03 '20 at 06:58

It should be working, though.

Remember that toPromise only return when the observable completes. Also that if your promise rejects, you need to catch error.

Put together an example for you: https://stackblitz.com/edit/rxjs-4n3y41

import { of, from } from 'rxjs'; 
import { map, catchError } from 'rxjs/operators';


const fetchCall = () => {
  return Promise.resolve({a: 1, b: 2});
}

const problematicCall = () => {
  return Promise.reject('ERROR')
}

const transformedPromise = from(fetchCall())
  .pipe(map(data => data.a))
  .toPromise()

const problematicTransformed = from(problematicCall())
  .pipe(catchError(data => of(data)))
  .toPromise()


transformedPromise.then((a) => console.log('Good boy', a));
problematicTransformed.then((a) => console.log('Bad boy', a));

How to convert an observable to Promise after pipe()

3 Answers3