What is the proper way of organizing http services in an angular app?-CodePudding

When I want to get data from backend, I use http client in a service separate from my component. So to get data (e.g. list of actors) in a component I inject my "factory" and subscribe to observables returned by it. It works fine.

@Injectable()
export class Factory{

    constructor(private httpClient : HttpClient){}

    getActors(): Observable<Actor[]>{
        return this.httpClient.get<Actor[]>('api/actor');
    }
}

But then when I need other data (e.g. list of movies) in the same component where I need an actors list, I just declare another method in that same factory service. The data returned from different methods of the same service may or may not be related to each other in the db. It is just easier for me to put everything in one service to use in a big separate part of the project (a module).

@Injectable()
export class Factory{

    constructor(private httpClient : HttpClient){}

    getActors(): Observable<Actor[]>{
        return this.httpClient.get<Actor[]>('api/actor');
    }

    getMovies(): Observable<Movie[]>{
        return this.httpClient.get<Movie[]>('api/movie');
    }
}

Now, often I need to receive the same data (a list of movies) in a different part of the project (different module). So I create a new factory service in this other part. And in it I declare a method that does the same as a method in the first service.

I feel like that is not preferable. If for example the API changes I will have to change it in two different parts of the project. It goes against the DRY principle.

Another way I see is to create separate services for every entity I have in a project. But then I'll have to inject as many services in the constructor of my component as many there are entities needed for it.

What is the proper way to organize your http services in an angular app?

CodePudding user response：

There is no right or wrong way to use services but you can say developer has their different opinion or way to implement services as per their use. now, you don't want to declare providers/service on every components but in angular if you are depending on some dependencies then you have to declare it first otherwise it won't work.

Now,If your project have to use your mentioned call on so many time and you don't want to call each and every time than you can use rxjs/ngxs service to detect changes on APIs.

rxjs- https://angular.io/guide/rx-library
ngxs - https://www.ngxs.io/

please, refer it and than implement it according to your use.

CodePudding user response：

That is a good question and often times overlooked which may come back as a headache when your app is starting to scale. This question will receive answers that are going be heavily heavily opinionated so take my advice with a pinch of salt.

It's a fine line when you should break into services and depending on what logic it does and to what extent. It will come with experience and working with other projects.

I think it's a good idea to concat most if not all http calls to a single file, because like you said, many components (through services) will most likely share those http calls. There you can also configure environment variables to what url's to use. I leave GeneralRequestService as the last layer. Then all services can access it. Otherwise Circular Dependency Injection errors are quick to come.