Angular 2:多个HTTP服务 [英] 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方法，只需使用HttpMethodInterceptorArgs参数将其添加到MockData类中即可.

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
}

We are using Angular 2 in our projects. So far we use in-memory-web-api in our data service in development:

app.module.ts:

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

data.service.ts:

constructor(private http: Http) { }

Now it's time to fetch some real data. However, we are not able to replace Mock Data all at once. How do I configure my data service to something like:

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

so we can gradually move mock data out as project progresses?

解决方案

Instead of trying to do this ugly "two HTTPs", the angular-in-memory-web-api provides a couple of options.

Starting from 0.1.3, there is configuration property to forward all not-found collections calls to the regular XHR.

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

What this will do is forward any request for which it cannot find the collection, on to the real XHR. So one option is to just gradually remove collections from the in-memory db, as requried.

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

Once you remove the dogs collection from the DB, the in-memory will now forward all dog requests to the real backend.

This is just a collection level fix. But if you need even more granular control, you can use method interceptors.

In your MockData class, say you want to override the get method, just add it to the MockData class, with a HttpMethodInterceptorArgs argument.

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

The structure of the HttpMethodInterceptorArgs is as follows (just so you have an idea of what you can do with it)

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
  }
}

As an example, here is what it would look like if you just forwarded all get requests

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

这篇关于Angular 2:多个HTTP服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！