Angular 6 http service best practice

Question

i have a feed service in angular that calls a REST endpoint which returns a List of EntryDTO. Here is how the service looks like:

@Injectable({providedIn: 'root'}) constructor(private http: HttpClient) {} export class FeedService() { getPublicFeedEntries: Observable<EntryDTO[]> () { return this.http.get('/rest/publicFeedEntries/).map((response: Response) => response.json()).catch((err: any) => Observable.throw(error.josn().error || 'error'); } }

So then i could have a feed component that subscribes to this observable:

export class FeedComponent() { private feedEntries: EntryDTO[]; constructor(private feedService: FeedService) { feedEntries = new Array(); } ngOnInit() { this.feedService.getPublicFeedEntries.subscribe(entries => { this.feedEntries = entries; }, err => {console.log(err) }) } }

Is this considered as best practice to return the observable in the service and subscribe in the component or are there other best practices?

Yes, normally the services return observables and in the component we subscribe to this observables. NOTE: If you use httpClient NOT use map(res=>res.json(). You need't do it — Eliseo
– Eliseo, Commented Aug 16, 2018 at 7:59
How do i get the json representation then? otherwise i cant assign the response to my array, right? — ItFreak
– ItFreak, Commented Aug 16, 2018 at 8:00
HttpClient, by defect, give you the json object directly. (use a console.log(res) to check it) — Eliseo
– Eliseo, Commented Aug 16, 2018 at 8:02
You should also consider using .pipe(takeUntil( /* Subject */)). I usually have a property destroyed$: Subject<void> = new Subject<void>(); and call this.destroyed$.next() in the ngOnDestroy hook. This will stop the subscription once the component is destroyed and will stop any subscription leaking which might affect performance. — Baruch
– Baruch, Commented Aug 16, 2018 at 8:17
@ItFreak yea, you're doing it wrong. Here, you can read more about it in this article. — Baruch
– Baruch, Commented Aug 16, 2018 at 14:10

Kedar9444 · Accepted Answer · 2018-11-15 06:49:50Z

The approach you are following is perfectly fine but to take it to new level you can introduce model's in your service which will make the response easy to read/use in your components.

Check this article written on ngx-model which provides way to follow a models driven approach in your application.

Collectives™ on Stack Overflow

Angular 6 http service best practice

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related