Angular2 http 服务替换为自定义服务

Question

我认为这对于许多其他开发人员来说可能是常见问题，但我还没有找到有效的解决方案。

我正在从事 Angular2 项目。当然，我有很多地方需要进行http调用来管理我的数据。因此，我使用 Http 服务，一切都按预期工作。

在某些架构阶段(当团队已经实现了大部分页面时)，出现了新的要求 - 现在我们需要更深入地连接服务器和客户端，因此应将附加 header 添加到从客户端发起的所有请求中(可以对其进行身份验证)不记名 token 、通过防火墙的方法覆盖指令等等)。

完全不是问题。 10 分钟即可完成:

• 创建新服务MyHttp
• 通过添加所需 header 重新实现所有 get、post、put、delete 方法
• 使用新的 MyHttp 批量替换所有 Http 引用
• 工作已完成

但是当您有很多开发人员参与时，这种方法并不好:

• 应该创建一些 wiki 资源并定义访问服务器的新规则。所有团队的所有开发人员都应立即开始遵守此规则
• 由于旧的 Http 服务(而不是 MyHttp)都可以访问，因此存在被重新使用的风险，因此会引入不正确的行为
• 当选择了不正确的客户端 http 服务时，服务器团队会更痛苦地发现不正确的行为

因此更适合多团队开发的方法 - 是使用 @NgModule 模块类注释将旧的 Http 服务替换为新的 MyHttp使用提供配置:

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [..., {provide: Http, useClass: MyHttp}],
  bootstrap: [AppComponent]
})

从我的 Angular 来看，这种方法有很多优点:

• 无需修改文件并将Http替换为MyHttp
• 使用 Http 服务时无需更改开发者规则
• 确保服务器端始终收到正确的 header
• 不用担心偶然使用 MyHttp 而不是 Http - 它们的行为相同

唯一的问题是，我们正在创建循环依赖，因为在 MyHttp 中我们需要使用旧的 Http

@Injectable()
export class HttpService {
  constructor(private http: Http) {
  }

  get(url: string) { return this.http.get(url); }
  post(url: string, data: any) { ...}
  ...
}  

因此抛出异常:

Cannot instantiate cyclic dependency!

所以唯一的方法是创建完全独立于 Http 的 MyHttp。但它增加了代码的复杂性。老实说，这种实现的味道。

有任何解决方案如何使用上面定义的配置在 MyHttp 中使用 Http 吗？

谢谢。

Answer 1

@Injectable()
export class MyHttp extends Http {

}

@NgModule({
  declarations: [ ... ],
  imports: [ HttpModule, ... ],
  providers: [..., 
    {provide: ConnectionBackend, useClass: XhrBackend},
    {provide: Http, useClass: MyHttp}
  ],
  bootstrap: [AppComponent]
})

不需要以这种方式注入(inject) HTTP。

只需从 https://github.com/angular/angular/blob/5921c872b6ef2f2de31f90576660a1bf56afb979/modules/%40angular/http/src/http.ts#L103-L184 覆盖即可你想要什么不同的行为。