In my angular application, I want to include the user token in each of my http request, so for what i have learned it is best to create a service so i dont have manually include my token or other parameter each time for my http request. The code could be like this:

export class FacilityService{
  constructor(private http: HttpClient) {
  }
  const httpOptions = {
    header: new HttpHeaders({
    Authorization: `bearer `   JSON.parse(localStorage.GetItem('user')).token
    })
  }
  

  load(): Observable<any> {
    return this.http.get<any>(
      `${environment.rootUrl}/facility/getFacility`, httpOptions
    );
  }
}

However, I also learned to use the Service to store state. So we dont have to request from the server each time. The Code could like this:

export class FacilityService{
  facility: Facility[] = [];

  constructor(private http: HttpClient) {
  }
  const httpOptions = {
    header: new HttpHeaders({
    Authorization: `bearer `   JSON.parse(localStorage.GetItem('user')).token
    })
  }
  

  load(): Observable<any> {
    if(this.facility.length > 0) return of(this.facility);
    return this.http.get<any>(
      `${environment.rootUrl}/facility/getFacility`, httpOptions
    ).pipe(map(facility => 
                 this.facility = facility;
                 return facility;
          ));
  }
}

2 question:

1. if I suppose to create a local state for all HTTP requests of all my entities? Each time I check the local data first and if it does not exist I request from the server. And I will have facility service, user service, order service.

2. How should I merge all those services into one service so I don't have to create the service for each of my entities? example, users data, and orders data can also share the service

CodePudding user response：

First off, if you need to add a header or something to EVERY HTTP Request, I would create an interceptor; not use some sort of parent service.

if I suppose to create a local state for all HTTP requests of all my entities? Each time I check the local data first and if it does not exist I request from the server.

Generally, I would separate state management from service integration code, so my code for accessing remote servers would not save any state.

For local caching, there are some types of data where it makes sense to cache stuff locally, and other types of data where that is never needed. For those that need it, you could use an observable in a service and shareReplay().

How should I merge all those services into one service so I don't have to create the service for each of my entities? Example, users data, and orders data can also share the service

I recommend creating a separate service for all entities. Most likely users data and orders data are different data schemas, with different endpoints, and I'm not sure what sort of thing would be 'shared' between them that isn't already encapsulated into Angular's HTTPClient class.