Angular 2 http observables example

Question

I want a component to call a method which calls a http.post which sets a behavior subject so then other components have access to the data some thing like this:

Component:

ngOnInit():void {
    this.service.getAsync();
}

Service:

  private _subject = new BehaviorSubject<any>([]);
  subject$ = this._subject.asObservable();

 getAsync() {    
    this.subject$ =  this.http
      .post(url, payload, options)
      .map();
  }

Or should I be looking to do something like this:

Component:

ngOnInit():void {
    this.service.setAsync();
}

Service:

  private _subject = new BehaviorSubject<any>([]);
  subject$ = this._subject.asObservable();

  setAsync(){
    this.subject$ = this.getAsync();
  }


  getAsync(): Observable<any[]> {    
    return this.http
      .post(url, payload, options)
      .map();
  }

Or something like this

Component:

ngOnInit():void {
    this.service.getAsync();
}

Service:

  private _subject = new BehaviorSubject<any>([]);
  subject$ = this._subject.asObservable();

  getAsync() {    
    this.http
      .post(url, payload, options)
      .map(data => this._subject.next(data));
  }

I'm not sure of what makes the most sense. To me 1 & 3 are the most logical. But I see everyone else using the return of an observable pattern. Then of course there is the 4th option that all of the above are wrong. What's the best way to do this?

Michael Kang · Accepted Answer · 2017-02-24 04:11:40Z

3

I would do this:

getAsync() {    
  this.http
    .post(url, payload, options)
    .map(t=>t.json())
    .subscribe(t=> {
        this._subject.next(t);            
    });
}

answered Feb 24, 2017 at 4:11

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Zack Lucky Over a year ago

This makes even more sense to me. This should work in the situation where the payload changes so I could just call the same method again correct?

Zack Lucky Over a year ago

One other question, are there any disadvantages to just setting the http call equal to the observable? e.g. subject$ = this.http.post()

Michael Kang Over a year ago

If you're going to overwrite the subject$ event, then the Subject is not needed. The benefit to having a subject is that you can fire the event yourself, as many times as you want. An http observable is a one time event. I think either is fine, just depends on your intent.

Zack Lucky Over a year ago

So with the intent to possibly use multiple http observables it makes the most sense to use a subject and just use .next with each new http call since it's a one time observable?

Michael Kang Over a year ago

In event based programming, you may want to setup a service, where components can subscribe to events that the service might expose. In that case, a subject would make sense, since you can setup an event, and have multiple components subscribe to that event. In other cases, you just want to make an http call, and notify components when it happens.

|

Collectives™ on Stack Overflow

Angular 2 http observables example

Component:

Service:

Component:

Service:

Component:

Service:

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Component:

Service:

Component:

Service:

Component:

Service:

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related