Observable, when to use?

Question

Why and when should I use the Observable, what are its advantages and disadvantages and its difference compared to Promisses?

Answer 1

Both a Promise as to a Observable bring abstractions to help deal with asynchronous events.

One Promise deals with a single event that may succeed or fail, while a Observable handles 0, 1 or multiple events, triggering the specified callback to each of these events.

The biggest advantage of a Observable is to have greater flexibility with regard to a Promise, for example, it is possible to cancel a request, hold back an action, while the Promise has only two states that are successful or failed.

A great article related to this theme is: https://tableless.com.br/entendendo-rxjs-observable-com-angular/

Answer 2

I brought this article that was published by Wendel Nascimento I found so that you can see not only what is more also how to use, maybe you understand better.

Link from where I got the reference for you to check the Full Article.: https://tableless.com.br/entendendo-rxjs-observable-com-angular/

What is an Observable?

By definition it is a collection that works unidirectionally, IE, it sends notifications whenever a change occurs in one of your items and from this we can perform an action. Let’s say that it solves the same problem that the previous version of Angular had solved with the $watch, but without using brute force. While on the $watch we check all our scope for changes after every $Digest Cycle (which has a great cost in performance), with Observable this check does not happen because for each event a notification is issued to our Observable and then we process the data.

What do I do with Observable? And where Angular enters this story?

Let’s imagine the consumption of a web service, something very common in Single Page application, before the Observable we would do so

getUsers(): Promise<User[]>{
  return fetch(myApiUrl)
  .then(res=>res.json())
  .catch(err=> Observable.throw(err.message));

} The above code is very simple, we are looking for a resource (A list of users) and after the answer we transform everything into JSON.

However, the new Angular was built with reactive applications in mind, abandoning the use of Promises and adopting Observable by default.

Using Observable the same function would look like this:

@Injectable()
class UserService {
 ...
 getUsers(): Observable<User[]> {
    return this.http.get(myApiUrl)
                    .map(res=>res.json())
                    .catch(err=> Observable.throw(err.message));
 } 
 ...
}