Angular2 Service running http method only once

Question

I have a service that requests info from the server. I only need to run the request once and make it available to every component. So far I have:

@Injectable()
export class ProductService {
    private products: Observable<IProduct[]>;
    private _productUrl = 'app/api/products2.json';

    constructor(private _http: Http) {
        console.log(this.products);
        this.products = this.setProducts();
    }

    setProducts(): Observable<IProduct[]> {
        return this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]>response.json())
            .do(data => console.log('A: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    getProducts(): Observable<IProduct[]> {
        return this.products;
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }
}

When the route changes, it runs the constructor setProducts line again. this.products is always undefined when it's logged so doing an if statement doesn't work. What can I change to make sure this http request isn't running when the service should already have that info?

Thanks!

See also stackoverflow.com/questions/36271899/…

Günter Zöchbauer
– Günter Zöchbauer

2016-08-04 05:17:28 +00:00
Commented Aug 4, 2016 at 5:17 — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 4, 2016 at 5:17

rashfmnb · Accepted Answer · 2016-08-01 19:52:22Z

1

do this in your bootstrap

it's because each time a new instance of service is created for each component

import {ProductService } from './app/services/product.service'; //put your path not mine
import { provide } from '@angular/core';
import {ReflectiveInjector} from '@angular/core';

let injector = ReflectiveInjector.resolveAndCreate(HTTP_PROVIDERS);
let http = injector.get(Http);
let prodService = new ProductService (http);    

bootstrap(AppComponent, [ 
  [provide(ProductService ,{useValue:prodService})]
]).catch(err => console.error(err));

edited Aug 1, 2016 at 19:52

answered Aug 1, 2016 at 17:54

rashfmnb

10.7k4 gold badges38 silver badges46 bronze badges

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

Comments

Bernardo Pacheco · Accepted Answer · 2016-08-01 18:01:40Z

0

Create a private property to cache the result. The first component to use your service will fire a server reques, but the subsequent requests will get the cached products.

@Injectable()
export class ProductService {
    private _productUrl = 'app/api/products2.json';
    private products: IProduct[];

    constructor(private _http: Http) {}

    getProducts(): Observable<IProduct[]> {
       if (this.products) {
          return Observable.of(this.products);
       } else {
          return this._http.get(this._productUrl)
            .map((response: Response) => <IProduct[]>response.json())
            .do(data => console.log('A: ' + JSON.stringify(data)))
            .catch(this.handleError);
       }
    }

    private handleError(error: Response) {
        return Observable.throw(error.json().error || 'Server error');
    }
}

answered Aug 1, 2016 at 18:01

Bernardo Pacheco

1,4451 gold badge14 silver badges23 bronze badges

4 Comments

Brooke Clonts Over a year ago

I tried your code above and it worked the same as the previous code. Where are you caching the result?

Bernardo Pacheco Over a year ago

The code above works, but it depends where you're defining your service. It's a good idea to add this services to the app component providers, so it'll live while your app is running and all the routes will fetch the cached result. Check if you added the services in the app component provider. I'm caching the results in the products variable.

Bernardo Pacheco Over a year ago

Why negative? Please, provide a feedback instead of just -1.

Brooke Clonts Over a year ago

Sorry I didn't give it a negative but I did a plus one for you so that should counteract it. I think I've found the answer. I've got it working as a constructor rather than a provider. So I think your code would work with the bootstrapping and the constructor

Brooke Clonts · Accepted Answer · 2016-08-03 22:16:22Z

0

Ok so @rashfmnb you were along the right lines. I needed to bootstrap it and I needed to add it as a constructor in my child components, rather than a provider. I was creating new instances of it.

Bootstrap: bootstrap(AppComponent, [HTTP_PROVIDERS, provideRouter(AppRoutes), [ProductService, otherService, anotherService, etc.]

edited Aug 3, 2016 at 22:16

answered Aug 2, 2016 at 15:43

Brooke Clonts

4651 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular2 Service running http method only once

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related