Question

在angular2 app中，我们需要调用很多第三方的restful API。知道如何组织这些API，所以我们可以集中管理这些API（可能在配置文件中）？

例如，在angular2教程

中

https://angular.io/docs/ts/latest/guide/server-communication.html#!#fetch-data

想象一下，我有20个服务，每个服务器里面都会有一些函数使用http get，post访问一堆第三方restful API。所以我想将所有这些API链接放在一个集中的地方，以后如果第三方API提供商有任何变化，我可以在不进入我的服务ts文件的情况下进行更改？

已更新

配置-values.ts

import {OpaqueToken} from 'angular2/core';
export const API_LOGIN = new OpaqueToken('API_LOGIN');

main.ts to bootstrap

...

import {API_LOGIN} from './app/shared/services/config-values';
bootstrap(AppComponent, [
  ROUTER_PROVIDERS,HTTP_PROVIDERS,
  provide(API_LOGIN, {useValue: 'http:bar.com/somepath'}),
  provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi:true}),
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

在调用它的login.service.js中

...
import {API_LOGIN} from 'config-values.ts';

@Injectable()
export class LoginService {
  private loggedIn = false;
  constructor(@Inject(API_LOGIN) private apiUrl:string,private http:Http) {
    this.loggedIn = !!localStorage.getItem('auth_token');
  }
}

Answer 1

我会创建一个包含OpaqueTokens的打字稿文件，并使用DI

传递它们

<强>配置-values.ts

export const API_FOO_URL = CONST_EXPR(new OpaqueToken('API Foo URL'));
export const API_BAR_URL = CONST_EXPR(new OpaqueToken('API Foo URL'));
...
export const API_URLS = CONST_EXPR([
  provide(API_FOO_URL, {useValue: 'http:foo.com/somepath'}), 
  provide(API_BAR_URL, {useValue: 'http:bar.com/somepath'}),
  ...
]);

<强> main.ts

import {API_URLS} from 'config-values.ts';

bootstrap(AppComponent, [API_URLS, ...]);

<强> foo.service.ts

import {API_FOO_URL} from 'config-values.ts';

@Injectable() 
export class FooService {
  constructor(@Inject(API_FOO_URL) private apiUrl:string) {}    
}

在Angular2中组织api链接的最佳实践

1 个答案: