配置Angular 2 HTTP服務

Question

我想知道什麼是使用http服務的正確方法。例如，我對服務器的所有請求都以/Api開頭。 我應該每次寫this.http.get('/Api/SomeRoute/:id')還是更優雅的方式來省略Api？

或者我應該創建一些其他managerService這將使用http？

Answer 1

一樣的東西端點URL可能是一個普通配置文件一個很好的例子。

在我的角2應用程序中，我使用它的依賴注入。在這種情況下，我有一些像使用OpaqueToken的app.config.ts使其注射：

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

這種方式，你可以有幾個CONFIGS（例如用於本地開發或生產等），並定義這是你這樣的模塊供應商：

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

然後我就在後端服務注入這個配置無論何時我需要它，例如使用endpointUrl：

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

在你的模塊中，你可以改變你想要提供的配置種類（在這個例子中，例如CONFIG或LOCALCONFIG），而不必在其他任何地方改變它。

希望這會有所幫助。

---

你的編輯之後，你增加了第二個問題或者我應該創建一個將使用http其他一些managerService？：

簡答：是的。您應儘可能多地分離組件，服務等的邏輯。

比方說，你有一個API提供有關貓和狗的信息。無論您想要調用它，您的前端所需的可能是CatService，DogService和BackendService或ApiService。

CatService和DogService是你的視圖組件將與之交互的那些，例如，它們將具有諸如getCatById()之類的方法。這些服務很可能會與anohter服務交互，BackendService將會注入Http並使用一般方法，如post(),get()等。

因此，您的BackendService是必須瞭解具體URL的人員，處理響應或錯誤並使用結果向調用服務報告，而其他人將僅用作管道並處理特定業務邏輯。

Answer 2

你說得對，最好把重複的值放在一個變量中。你可以把底座URL在const：

const apiUrl = '/Api/'; 

，然後如果有變化的URL，你只改變一個地方，也是你的代碼看起來更乾淨。用法是這樣的：

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

當然，你還可以創建這是否爲你的功能，但可能是過於抽象。