Angular 2 HTTPサービスを設定する

Question

httpサービスを使用する正しい方法はなんですか？たとえば、サーバーへのすべてのリクエストは/Apiで始まります。 毎回this.http.get('/Api/SomeRoute/:id')と書かなければなりませんか？より優雅な方法があり、Apiを省略する必要がありますか？

httpを使用するmanagerServiceを作成する必要がありますか？

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を持っていると定義することができますこのようなあなたのモジュール内のプロバイダとして、この：

：私は エンドポイントURLを使用するバックエンドサービスでは、たとえば、それを必要とするかもしれないどこ

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

その後、私はちょうどこの設定を注入

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

モジュールでは、提供する設定の種類（この例ではCONFIGまたはLOCALCONFIGなど）を変更するだけで、他の場所で変更する必要はありません。

これが役に立ちます。あなたの編集後

---

、あなたは2番目の質問を追加または私はHTTPを使用しますいくつかの他のmanagerServiceを作成する必要がありますか？：

短い答え：はい。できるだけコンポーネントやサービスなどのロジックを分離する必要があります。

猫と犬に関する情報を提供するAPIがあるとします。フロントエンドに入れたいものは、CatService、DogService、BackendServiceまたはApiServiceとなります。

CatServiceとDogServiceは、ビューコンポーネントが対話するものです。たとえば、getCatById()などのメソッドがあります。これらのサービスは、Httpを注入し、post(),get()などの一般的な方法を使用する、anohterサービスであるBackendServiceと相互作用する可能性が最も高いでしょう。

あなたのは、特定のURLを知り、応答やエラーを処理し、結果を呼び出しているサービスに戻って報告し、他のものはパイプラインとして使用され、特定のビジネスロジックを処理する必要がある。

Answer 2

あなたが正しいです、繰り返し値を変数に入れる方が良いです。

const apiUrl = '/Api/'; 

をして、URLへの変更がある場合、1つのだけの場所でそれを変更し、また、あなたのコードがきれいに見える：あなたはconstにベースURLを置くことができます。使用方法は次のとおりです。

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

もちろん、それを行う機能を作成することもできますが、抽象度が高すぎる可能性があります。