配置Angular 2 HTTP服务

Question

I wonder what is the right way to use http service. For example all my requests to server starts with /Api . Should I write this.http.get('/Api/SomeRoute/:id') every time, or more elegant way exists to omit Api ?

Or should I create some other managerService which will use http ?

Answer 1

Something like an endpoint url is probably a good example for a general configuration file.

In my angular 2 apps i use the dependency injection for it. In this case i have something like an app.config.ts using OpaqueToken to make it injectable:

import { OpaqueToken } from '@angular/core';

export interface IAppConfig {
    appTitle: string;
    endpointUrl: string;
};

export const CONFIG: IAppConfig = {
    appTitle: 'MyApp',
    endpointUrl: 'http://api.myrealservice.com/'
};

export const LOCALCONFIG: IAppConfig = {
    appTitle: 'MyApp (LOCAL)',
    endpointUrl: 'http://localhost:8080/api/'
};

export let APP_CONFIG = new OpaqueToken('app.config');

This way you can have several configs (for example for local development or production etc..) and define this as a provider in your module like this:

providers: [
    ...,
    {
        provide: APP_CONFIG,
        useValue: CONFIG
    },
    ...
]

Then i just inject this config wherever i may need it, for example in a backend service to use the endpointUrl :

...
constructor(@Inject(APP_CONFIG) private _config:Config) {
    console.log(this._config.endpointUrl);
}

In your module you can just change the kind of Config you want to provide (in this example CONFIG or LOCALCONFIG for example) and don't have to change it anywhere else anymore.

Hope this helps.

---

After your edit, you added a second question Or should I create some other managerService which will use http? :

Short answer: yes. You should seperate logic of your components, services, etc. as much as possible.

Let's say you have a an API which serves information about cats and dogs. What you want to have in your frontend would probably be a CatService , a DogService and a BackendService or ApiService , whatever you want to call it.

The CatService and DogService are the ones your view components will interact with, for example they will have methods like getCatById() or something like that. These services will most likely interact with anohter service, the BackendService which will inject Http and use general methods like post() , get() and so on.

So your BackendService is the one who has to know the specific urls, handle the responses or errors and report back to the calling services with the results, while the other ones will just be used as a pipeline and handle specific business logic.

Answer 2

You are right, it is better to put repeating values in a variable. You can put the base URL in a const :

const apiUrl = '/Api/';

and then if there is a change to the URL, you only change it in one place, and also your code looks cleaner. The usage is like this:

this.http.get(apiUrl + 'SomeRoute/:id')

Of course you can also create a function that does that for you, but that may be too much abstraction.