Настройка службы HTTP с угловым 2

Question

Интересно, как правильно использовать услугу http. Например, все мои запросы на сервер начинаются с /Api. Должен ли я писать this.http.get('/Api/SomeRoute/:id') каждый раз, или более элегантный способ существует, чтобы опустить Api?

Или мне нужно создать другое managerService, которое будет использовать http?

Answer 1

Что-то вроде конечной точки URL, вероятно, является хорошим примером для общего конфигурации файла.

В моих приложениях с угловым 2 я использую инъекцию зависимости для него. В этом случае у меня есть что-то вроде app.config.ts с использованием OpaqueToken, чтобы сделать его инъекционным:

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'); 

Таким образом, вы можете иметь несколько конфигов (например, для местного развития или производств и т.д ..) и определить это в качестве поставщика в модуле, как это:

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

Тогда я просто впрыскивать этот конфиг, где я это может понадобиться, например, в службе бэкэнд, чтобы использовать endpointUrl:

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

В вашем модуле вы можете просто изменить тип конфигурации, которую вы хотите предоставить (например, в этом примере CONFIG или LOCALCONFIG), и больше не нужно менять его где-либо еще.

Надеюсь, это поможет.

---

После правки, вы добавили второй вопрос Или я должен создать какой-то другой managerService который будет использовать HTTP?:

Короткий ответ: да. Вы должны как можно больше разделить логику своих компонентов, сервисов и т. Д.

Предположим, у вас есть API, который обслуживает информацию о кошках и собаках. То, что вы хотите иметь в своем интерфейсе, вероятно, будет CatService, DogService и BackendService или ApiService, что бы вы хотели назвать.

CatService и DogService - те, с которыми будут взаимодействовать ваши компоненты просмотра, например, у них будут методы, такие как getCatById() или что-то в этом роде.Эти службы, скорее всего, будут взаимодействовать с анонимным сервисом, BackendService, который будет вводить Http и использовать общие методы, такие как post(), get() и так далее.

Значит, ваш BackendService - это тот, кто должен знать конкретные URL-адреса, обрабатывать ответы или ошибки и отчитываться перед вызывающими службами с результатами, тогда как другие будут использоваться только как конвейер и обрабатывать определенную бизнес-логику ,

Answer 2

Вы правы, лучше поместить повторяющиеся значения в переменную. Вы можете поставить базовый URL в const:

const apiUrl = '/Api/'; 

, а затем, если есть изменения в URL, вы измените его только в одном месте, а также ваш код выглядит чище. Использование такой:

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

Конечно, вы можете также создать функцию, которая делает это для вас, но это может быть слишком много абстракции.