javascript - 配置 Angular 2 HTTP 服务

Question

我想知道使用http 服务的正确方法是什么。例如，我对服务器的所有请求都以 /Api 开头。我应该每次都写 this.http.get('/Api/SomeRoute/:id')，还是存在更优雅的方法来省略 Api？

或者我应该创建一些其他使用 http 的 managerService 吗？

Answer 1

类似端点 url 的东西可能是一般配置 文件的一个很好的例子。

在我的 Angular 2 应用程序中，我使用了依赖注入(inject)。在这种情况下，我有类似 app.config.ts 的东西，使用 OpaqueToken 使其可注入(inject):

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
    },
    ...
]

然后我就在我可能需要的地方注入(inject)这个配置，例如在后端服务中使用 endpointUrl:

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

在你的模块中，你可以只改变你想要提供的配置类型(在这个例子中是 CONFIG 或 LOCALCONFIG )而不必改变它其他任何地方。

希望这对您有所帮助。

---

编辑后，您添加了第二个问题或者我应该创建一些其他使用 http 的 managerService 吗？:

简短的回答:是的。您应该尽可能地分离组件、服务等的逻辑。

假设您有一个提供有关猫狗信息的 API。您希望在前端拥有的可能是 CatService、DogService 和 BackendService 或 ApiService，随便你怎么调用它。

CatService 和 DogService 是您的 View 组件将与之交互的对象，例如，它们将具有 getCatById() 之类的方法像那样。这些服务很可能会与另一个服务交互，BackendService 将注入(inject) Http 并使用一般方法，如 post()、get () 等等。

因此您的 BackendService 是必须知道特定 url、处理响应或错误并将结果报告回调用服务的那个，而其他的将仅用作管道和处理特定的业务逻辑。