how to use the result of an http.get () for two or more non-angular components?

Question

I wanted to know how I do to use an array in two angular components without the need to make two http.get requests.

My service.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { environment } from '../../../environments/environment';

@Injectable()
export class CategoryService {

  constructor(
    private http: Http
  ) {
  }

  getAll(): Promise<any> {
    return this.http.get(`${environment.apiUrl}/categories`)
      .toPromise()
      .then(response => response.json());
  }

}

First component Here I am making the first requisition.

import { Component, OnInit } from '@angular/core';

import { PostService } from './../core/service/post.service';
import { CategoryService } from './../core/service/category.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  categories = [];

  constructor(
    private postService: PostService,
    private categoryService: CategoryService
  ) { }

  ngOnInit() {
    this.getAllCategories();
  }

  getAllCategories() {
    return this.categoryService.getAll()
      .then(categories => {
        this.categories = categories;
      })
      .catch(error => {
        throw error;
      });
  }

}

Second component Here I am making the second requisition.

import { Component, OnInit } from '@angular/core';

import { CategoryService } from './../core/service/category.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  categories = [];

  constructor(
    private categoryService: CategoryService
  ) { }

  ngOnInit() {
    this.getAllCategories();
  }

  getAllCategories() {
    return this.categoryService.getAll()
      .then(categories => {
        this.categories = categories;
      })
      .catch(error => {
        throw error;
      });
  }

}

Could I create a public array in service? or it would be bad practice

https://stackoverflow.com/questions/53729362/how-to-get-rid-from-redundant-request-in-angular-6-service/53731045#53731045 — yurzui, Jun 10 '19 at 01:33
This solved my problem https://stackoverflow.com/questions/52717168/how-to-create-an-http-observable-that-makes-dynamic-requests/52717933#52717933 — Matheus Almeida, Jun 15 '19 at 04:13

score 0 · Answer 1 · answered Jun 10 '19 at 05:06

A better approach would be to leverage “caching”.

1) To enhance your architecture, create one http-wrapper.service.ts, which wraps all http methods and have one property here to either read from cache or make an actual http get call. Donot cache post etc request.

2) Moreover create an http-cache.interceptor.ts, where in you can write logic to make an actual http get call or reutrn result from cache

These are the two best approaches which will not only solve your problem, but also enhance your architecture and handle all generic requests

Cheers (y)

how to use the result of an http.get () for two or more non-angular components?

1 Answers1