What does "next" do inside of .subscribe()?

Question

I have seen three ways to "listen" for changes to a value via an observable / call APIs to fetch data from the backend.

One of these ways has "next:" :

this.MySubscription = this.myService.getStuff().subscribe({
    next: (data) => {
        <insert code to perform operations with "data">
    }, error: (err) => {
        console.error(err);
        // <insert code for what to do on failure>
    }
});

And on the Angular site https://angular.io/guide/observables I see this, with "next(" :

// Call subscribe() to start listening for updates.
const locationsSubscription = locations.subscribe({
    next(position) {
        console.log('Current Position: ', position);
    },
    error(msg) {
        console.log('Error Getting Location: ', msg);
    }
});

But I have been just doing it the "normal way", like this (with no "next"):

this.MySubscription = this.myService.getStuff().subscribe((data: any) => {
    <insert code to perform operations with "data">
}, error => {
    console.error(error);
    <insert code for what to do on failure>
});

Is there any functional difference between these three methods of subscribing? How does each method produce different results?

Answer 1

The 3 ways you show in your question do the same thing.
It is just 3 different ways to give an observer.

• In the first one, you give a PartialObserver<T> object with a next function, which will be executed when receiving a value that is not an error
• In the second one, you give a PartialObserver<T> object with a next function, again, but with the shorthand function syntax
• In the third one, you use Observable.subscribe(<closure>) which is basically a shortcut to Observable.subscribe({ next: <closure> })

You always use the 3rd way, unless you have to handle error and/or complete cases.
If you do have to handle those cases, you have to choose between the 1st or the 2nd way you showed in your question; either one works, just keep consistency in your code (always use the same way in your code; use a linter).

For reference: https://rxjs.dev/api/index/class/Observable#subscribe

Answer 2

There are basically three method of Observable conceptually as below:

1. next(): this method define that how to process data which is sent by observable

2. error(): this method define that how to manage error handling activities.

3. complete(): this method define course of action need to perform after the observable has completed producing and emitting data.

4. next() method cannot be executed after the observable has errored or completed.

5. next(), error() or complete() method cannot be called after unsubscribe.

6. unsubscribe is called on error or complete to free the resources used by the subscription and the observable.

Exmaple

some$.subscribe({  
  next: x => console.log('The next value is: ', x),  
  error: err => console.error('An error occurred :', err),  
  complete: () => console.log('There are no more action happen.')  
});

So, Final and summary answer of your question is next get the latest value from the stream of Observable.

When an Observable issues an OnError or OnComplete notification to its observers, this ends the subscription. Observers do not need to issue an Unsubscribe notification to end subscriptions that are ended by the Observable in this way