Difference between the methods .pipe() and .subscribe() on a RXJS observable

JavascriptAngularRxjs

Javascript Problem Overview


I recently notice that I can return a value inside .pipe() but not inside .subscribe().

What is the difference between these two methods?

For example if I have this function, let's call it 'deposit', which is supposed to return the account balance, if I do this:

deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}

It returns an observable and if I do this:

deposit(account, amount){
    return this.http.get('url')
    .pipe(
        map(res => {
            return res;
        });
    );
}

It returns the account balance as expected.

So why?

Javascript Solutions


Solution 1 - Javascript

The pipe method is for chaining observable operators, and the subscribe is for activating the observable and listening for emitted values.

The pipe method was added to allow webpack to drop unused operators from the final JavaScript bundle. It makes it easier to build smaller files.

> For example if I have this function, let's call it 'deposit', which supposed to return the account balance, if I do this:
> > deposit(account, amount){ > return this.http.get('url') > .subscribe(res => { > return res; > } > } >It returns an observable

That isn't what it returns. It returns the Subscription object created when you called Subscribe.

>and if I do this: > > deposit(account, amount){ > return this.http.get('url') > .pipe( > map(res => { > return res; > }); > ); > } >It returns the account balance as expected.

That isn't what it returns. It returns an Observable which uses a map operator. The map operator in your example does nothing.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmadou BeyeView Question on Stackoverflow
Solution 1 - JavascriptReactgularView Answer on Stackoverflow