Angular 2 : multiple HTTP services

我们在项目中使用Angular 2。到目前为止，我们在开发中的数据服务中使用了in-memory-web-api:

app.module.ts :

imports: [
    HttpModule,
    InMemoryWebApiModule.forRoot(MockData),
    ...
]

data.service.ts :

constructor(private http: Http) { }

现在是时候获取一些真实数据了。但是，我们无法一次全部替换模拟数据。如何将我的数据服务配置为以下内容:

constructor(private fakeHttp: FakeHttp, /* this one use in-memory-api */
            private http: Http /* this one goes to real remote server */) { }

这样我们就可以随着项目的进行逐步将模拟数据移出？

最佳答案

angular-in-memory-web-api并没有尝试执行此丑陋的“两个HTTP”，而是提供了两个选项。

从0.1.3开始，具有配置属性，可将所有未找到的集合调用转发到常规XHR。

InMemoryWebApiModule.forRoot(MockData, {
  passThruUnknownUrl: true
})

它将执行的操作是将无法找到其集合的任何请求转发到真正的XHR。因此，一种选择是按照需要从内存数据库中逐渐删除集合。

class MockData implements InMemoryDbService {
  createDb() {
    let cats = [];
    let dogs = [];
    return {
      cats,
      // dogs
    };
  }
}

从数据库中删除dogs集合后，内存中现在会将所有狗请求转发到真实的后端。

这只是一个集合级别的修复。但是，如果您需要更精细的控制，则可以使用方法拦截器。

在MockData类中，说您想覆盖get方法，只需使用MockData参数将其添加到HttpMethodInterceptorArgs类中即可。

class MockData implements InMemoryDbService {
  get(args: HttpMethodInterceptorArgs) {
    // do what you will here
  }
}

HttpMethodInterceptorArgs的结构如下(只是这样，您便知道可以使用该代码做什么)

HttpMethodInterceptorArgs: {
  requestInfo: {
    req: Request (original request object)
    base
    collection
    collectionName
    headers
    id
    query
    resourceUrl
  }
  passThruBackend: {
    The Original XHRBackend (in most cases)
  }
  config: {
    this is the configuration object you pass to the module.forRoot
  }
  db: {
    this is the object from creatDb
  }
}

举个例子，这就是您刚刚转发所有get请求的样子

get(args: HttpMethodInterceptorArgs) {
  return args.passthroughBackend.createConnection(args.requstInfo.req).response
}