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

Question

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?

score 106 · Accepted Answer · edited Mar 03 '21 at 21:38

106

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.

edited Mar 03 '21 at 21:38

vincenthavinh

442
4
12

answered Jul 10 '18 at 15:50

Reactgular

52,335
19
158
208

8

This answer is now incomplete. It seems to be missing screenshots or code snippets – Mark Bolster Oct 27 '20 at 18:31
4

I think he's referring to the OP's code snippets, rather than duplicating them in the answer. This caught me out as well. – Shafiq Jetha Dec 01 '20 at 17:32
4

I edited the answer to include the OP's code snippets to improve readability, thx @ShafiqJetha for pointing what was missing. – vincenthavinh Mar 30 '21 at 15:43
1

I think this answer really needs an explanation on whether you can move a lambda in `.subscribe()` inside the `.pipe()`. – iSpain17 Mar 18 '22 at 12:36

Kamil Kiełczewski · Answer 2 · 2023-04-17T20:43:36.153

One important differece is that when you not execute subscribe request will newer be send and pipe will be never executed. Here is working example which shows the difference

Subscribe

const { interval, of } = rxjs;
const { delay, take } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

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

let subscription = deposit('',''); // immediately send request
// you can cancel request by subscription.unsubscribe()

console.log('subscribed');

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

Pipe

const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

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

const observable = deposit('',''); // this will return observable and do nothing


console.log('nothing happen');

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

Pipe + Subscribe

const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

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

const observable = deposit('',''); // this will return observable and do nothing

const subscription = observable.subscribe(result => { // this will send request 
  console.log('hello from subscriber')
}); 

// subscription.unsubscribe() - this will cancel request

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

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

2 Answers2

Linked