Return a Observable from a Subscription with RxJS

Question

I currently have a service that do a HTTP request to an API to fetch data. There are some logic that I want to do to the observable from within the service, but I still want to also subscribe to the Observable in my Component so that I can return any errors to the Component and to the user.

Currently I do:

// service.ts
getData(): Observable<any> {
    return this.http.get(url).pipe(catchError(this.handleError)
}

// component.ts
ngOnInit() {
    this.service.getData().subscribe(res => {
        // Do my logic that belong to the service.ts
        // ...

        // Do my logic that belongs in the component.ts
        // ...
    }, err => this.errors = err)
}

What I would like to do is to refactor this so that I handle the logic related to the subscription and the service.ts within the getData() method, and then return an Observable with the HTTP response and any errors to the Component so that I can continue doing things there.

What's the pattern to do this?

Answer 1

I feel like multiple of the patterns and solutions posted is "ugly" or does not follow the Observable pattern (Like doing callbacks).

The cleanest, most "RxJS"-like solution I came up with was to wrap the service method in a second Observable factory method.

So the following:

// service.ts
getData(): Observable<any> {
    return Observable.create((observer: Observer) => {
        this.http.get(url)
          .pipe(catchError(this.handleError)
          .subscribe(res => {
              // Do my service.ts logic.
              // ...
              observer.next(res)
              observer.complete()
          }, err => observer.error(err))
    })
}

// component.ts
ngOnInit() {
    this.service.getData().subscribe(res => {
        // Do my component logic.
        // ...
    }, err => this.errors = err)
}

Answer 2

Use map:

// service.ts:

import { catchError, map } from 'rxjs/operators';

getData(): Observable<any> {
    return this.http.get(url).pipe(
        map(res => {
            /* Your processing here */
            return res;
        }),
        catchError(this.handleError)
    )
}

Answer 3

Try this way

service.ts

getData(): Observable<any> {
  return this.http.get(url).map(res=> <any>(res['_body']));
}

component.ts

this.service.getData().subscribe(response=>{
            var res1 = JSON.stringify(response);
            var res2 = JSON.parse(res1);
            var res3 = JSON.parse(res2);
});  //parse response based on your response type 

Answer 4

Option 1

If you subscribe Observable in component then only component will have that subscription and it must be passed back to service.

Option 2

Use this pattern.

service.ts

    getData(doer: Function) {
        let subscriptions = Observable.of({ data: 'response', isError: false })// request
            .catch(error => Observable.of({ data: error, isError: true })) //handle error
            .do(data => doer(data))
            .subscribe();
        this.handleSubscription(subscriptions); //subscription handling in service
    }

component.ts

    ngOnInit() {
        this.getData(response => {
            if (response.isError) {
                ///
            } else {
                let data = response.data;
                // Process
            }
        })
    }

Answer 5

Be careful: All the answers are for <= Angular 4. In Angular 5, you don't need a map() anymore, so just leave that out. just return this.http.get() as it returns an Observable, where you can subscribe on.

Furthermore, be aware you have to import HttpClient instead of Http.

Answer 6

You can directly use "map" and "catch" function on Observable returned by http.get method.

import { catchError, map } from 'rxjs/operators';

getData(): Observable<any> {
    return this.http.get(url)
        .map(res => {
            /* Your processing here */
            return res;
        })
        .catch(this.handleError);
}

Answer 7

You can remove this, and use map. In subscribe error, you can get error event.

If you use HttpClient, just use get!