配置Angular2个HTTP服务

Question

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

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

Answer 1

你说得对，把重复的值放在一个变量里比较好。您可以将基数 URL 放入 const:

const apiUrl = '/Api/';

然后如果 URL 有变化，您只需更改一个地方，而且您的代码看起来更干净。用法是这样的：

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

当然，您也可以创建一个函数来为您执行此操作，但这可能过于抽象。

Answer 2

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

在我的 angular 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），而不必再在其他任何地方进行更改。

希望这对您有所帮助。

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

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

假设您有一个 API，它提供关于猫和狗的信息。您想要在前端拥有的内容可能是 CatService、DogService 和 BackendService 或 ApiService，无论您如何称呼它。

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

所以您的 BackendService 是必须了解特定 url 的人，处理响应或错误并将结果报告给调用服务，而其他人只会用作管道并处理特定的业务逻辑。

配置Angular2个HTTP服务

Configure Angular 2 HTTP service

javascript

angular2-http

angular