Observables in Angular for http calls

Question

I was going through above angular observable documentation and in one section where they compare promises with observalbe the following point is give

Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.

So I am trying here to make a mental model of Observable and getting confused So when they say Observable provide many values what does it mean

Like suppose i do a http call and observable will obviously return particular data(response) Even promises will do same

And overtime api can either return with response or api might fail ,the same can done with promise as well

So whats the major difference while doing a http call using observable and promise

Apart from Promise executes immediately and Observable needs to be subscribed

Does this answer your question? [What is the difference between Promises and Observables?](https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables) — Adrian Kokot, Jul 06 '23 at 08:30
I always get stuck when they explain Observable as function that return a stream of data What exactly does stream of data mean Suppose i do a http call using observable in angular will the response be streamed — JustaGamer, Jul 06 '23 at 08:32
@AdrianKokot prior to me asking the question ,I did go through the same question — JustaGamer, Jul 06 '23 at 08:34
Observable can return multiple values over time, promises can't. In terms of HTTP call observable will return one value (http response) and then finish, so number of values will be exactly the same as promise. But the overall power of observable in HTTP calls is it's rxjs operators and unified, simplified syntax (no need for `.then`) — Adrian Kokot, Jul 06 '23 at 08:34
ok, when u say multiple values over time , does that mean it needs to be subscribed every time ? — JustaGamer, Jul 06 '23 at 08:36
No, that's the point of subscription. If you subscribe to observable, the subscriber will get every value that observable emits until it completes. Promises can't do that. If you want deeply understand the power of rxjs observables I recommend going through examples at [learnrxjs.io](https://www.learnrxjs.io/). Without it, it can be confusing what's the benefit for Angular to use it. — Adrian Kokot, Jul 06 '23 at 08:37
So when will this come into picture "Observable can return multiple values over time" Like whats the scenario where this particular statement can be observed — JustaGamer, Jul 06 '23 at 08:39
For example, [type ahead](https://www.learnrxjs.io/learn-rxjs/recipes/type-ahead), [http polling](https://www.learnrxjs.io/learn-rxjs/recipes/http-polling), [scroll indicator](https://www.learnrxjs.io/learn-rxjs/recipes/horizontal-scroll-indicator). Of course, you could do all of them without observables or/and rxjs, but you also could write plain javascript instead of learning angular. The whole point is to make it easier to develop — Adrian Kokot, Jul 06 '23 at 08:43
I have a video that may help with understanding Observables. You can find it here: https://youtu.be/vtCDRiG__D4 — DeborahK, Jul 06 '23 at 22:01

score 2 · Answer 1 · answered Jul 06 '23 at 08:45

It's because you're thinking about a wrong example. A HTTP call is by definition a single request-response cycle.

Consider instead something like mouse click.

Suppose you have a mouse click observer. You can execute your logic on every mouse click. In the javascript world we don't really need an observer pattern since event handlers are normal things in the language (they do however look and feel like the observer pattern without the boilerplate of a design pattern). So suppose you want to play a trumpet sound every time you click a button. You'd just do something like:

button.on('click', () => play_trumpet_sound());

On the other hand, a Promise can only happen once. So if the button exposes a Promise interface you'd instead need to do something like:

async function listenToClick () {
    while (1) {
        await button.getClick();

        play_trumpet_sound();
    }
}

listenToClick();

While Promises (and the async/await syntax that accompany them) are more concise and easier to use for a lot of use-cases, not all use-cases are better with Promises. When you need to listen for something that can happen again you're better off with regular callbacks (or in other languages the Observer pattern)

Observables in Angular for http calls

1 Answers1