CODEWITHSUNDEEP
angularpromiseobservableangular-http
Lyuba
Lyuba

Reputation: 53

Basic understanding of Angular Http

I have read some articles about Angular's Http service, but still I cannot understand some things:

  1. what does http.get('some/string/') return?

  2. what does http.get('some/string/').map return? If map does not return an actual result of http request, what for do I need to use it?

  3. How can I get actual result of http request without using map, observables, toPromise etc.?

  4. Can I just use Promises without toPromise? If not, how can I use toPromise to get actual result of http request?

Upvotes: 0

Views: 393

Answers (2)

danimal
danimal

Reputation: 1697

1) http.get(url) returns an Observable which you can use with none or any of the RxJS operators (eg map, filter etc - see RxJs docs)

EDIT - as of Angular 4.3 the Http module assumes JSON as deafult so the map(res=>res.json()) call no longer needed!

2) http.get(url).map() will return a mapped (transformed) Observable, potentially wrapping a different type, eg Observable<string>. The exact type depends on the function inside your map call. Often in Angular 2/4, this function is used to map a response to a javascript object using the .json() method:

this.http.get(url).map(response => response.json())

which will give you an Observable wrapping the JS object, eg something like {user: 'Fred', balance: 65535}. To actually 'use' this object/response, you must SUBSCRIBE to the Observable, usually in the calling component (although possibly in the service), and in the subscribe callback you can do what you want with the actual response data, eg log it, pass it to other functions, store as a class member etc:

http.get(url).map(res => res.json()).subscribe(resObject => {
   console.log(resObject);
   this.user = resObject.user;
   this.balance = resObject.balance;
});

Only when subscribe is called is the http request actually made... this is the nature of Rx!

3) You can't, you HAVE to subscribe to the observable. The response from an http call is by nature ASYNCHRONOUS and cannot be simply transformed in synchronous code - you can't just write, e.g.

this.user = http.get(url).fromObservable() as there is no guarantee the server has responded and provided something to convert and use in synchronous code. In addition, the nature of an observable here is that unless it is subscribed to, the observable will not do anything!

4) You can transform an observable to a promise (although I would avoid it unless you reeeeally love promises as observable are MUCH more powerful) and use .then if you like...

Upvotes: 2

Milad
Milad

Reputation: 28590

I agree with @Claies that you should read the docs, however, I can also understand it could be a bit difficult at first.

Http.get() call will return an Observable which you can subscribe to, to make it actually work.

Observables has 150~ methods, like map, flatMap, filter, scan and what not which you can think of them as Array methods.

When you call each of those methods, what you get back is another observable , so it's a chain : 

   let firstThing = Observable
   let secondThing = firstThing.doSomething()
   let thirdThing  = secondThing.doSomethingElse()

could be : 

    let thirdThing =   firstThing.domeSomething().doSomethingElse();

It's called chaining and you had them in JQuery as well : 

element.find(blah).addClass(bllaah).removeClass().find() ....

Last but not least, all the observables are cold ( lazy), meaning that unless you subscribe to them, the whole chain is't doing anything.

Having said that,

This is not gonna run doSomething and doSomethingElse until someone subscribe to them.

    let thirdThing =   firstThing.domeSomething().doSomethingElse();

so to make em work : 

        thirdThing.subscribe(callback);

So , you can't use http methods without subscribing to them.

Upvotes: 1

Related Questions