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

Question

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

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

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

根本不是问题。10分钟完成：

• 创建新服务MyHttp
• 通过添加所需的标头重新实现所有get, post, put,delete方法
• 批量替换所有Http引用为新的MyHttp
• 完工

但当你有很多开发人员参与时，这种方法就不好了：

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

因此，更适合多团队开发的方法是使用模块类注释用新的使用配置@NgModule替换旧Http服务：MyHttpprovide

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

从我的角度来看，这种方法有很多优点：

• 无需修改文件并替换Http为MyHttp
• Http使用服务无需更改开发者规则
• 确保服务器端始终收到正确的标头
• 不用担心偶然使用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) { ...}
  ...
}  

所以抛出异常：

无法实例化循环依赖！

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

是否有任何解决方案如何使用上面定义的配置Http内部使用？MyHttp

谢谢。

Answer 1

@Injectable()
export class MyHttp extends Http {

}

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

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

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