CODEWITHSUNDEEP
javascriptangularrxjs
Marcus Lind
Marcus Lind

Reputation: 11470

Return a Observable from a Subscription with RxJS

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?

Upvotes: 15

Views: 24334

Answers (7)

Marcus Lind
Marcus Lind

Reputation: 11470

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's return value in a second Observable.

So the following:

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

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

Upvotes: 46

Chiien
Chiien

Reputation: 341

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

If you use HttpClient, just use get!

Upvotes: -2

Ashish Patel
Ashish Patel

Reputation: 345

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);
}

Upvotes: -1

amitdigga
amitdigga

Reputation: 7178

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
            }
        })
    }

Upvotes: 0

dave0688
dave0688

Reputation: 5790

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.

Upvotes: -1

Esco
Esco

Reputation: 397

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

Upvotes: 0

Faly
Faly

Reputation: 13356

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)
    )
}

Upvotes: 1

Related Questions