title: caching results with angular2 http service
body: <p>I expose an HTTP GET request through a service, and several components are using this data (profile details on a user). I would like the first component request to actually perform the HTTP GET request to the server and cache the results so the the consequent requests will use the cached data, instead of calling the server again.</p>
  
  <p>Here's an example to the service, how would you recommend implementing this cache layer with Angular2 and typescript.</p>
  
  <pre><code>import {Inject, Injectable} from 'angular2/core';
  import {Http, Headers} from "angular2/http";
  import {JsonHeaders} from "./BaseHeaders";
  import {ProfileDetails} from "../models/profileDetails";
  
  @Injectable()
  export class ProfileService{
      myProfileDetails: ProfileDetails = null;
  
      constructor(private http:Http) {
  
      }
  
      getUserProfile(userId:number) {
          return this.http.get('/users/' + userId + '/profile/', {
                  headers: headers
              })
              .map(response =&gt;  {
                  if(response.status==400) {
                      return "FAILURE";
                  } else if(response.status == 200) {
                      this.myProfileDetails = new ProfileDetails(response.json());
                      return this.myProfileDetails;
                  }
              });
      }
  }
  </code></pre>