Angular2 - 将 POST 与 angular-in-memory-web-api 一起使用答案

【问题标题】：Angular2 - Using POST with angular-in-memory-web-apiAngular2 - 将 POST 与 angular-in-memory-web-api 一起使用
【发布时间】：2017-03-06 16:15:43
【问题描述】：

我正在为 Angular 2 使用 angular-in-memory-web-api。到目前为止，我只使用 GET 调用，它运行良好。

我要调用的 API 仅使用 POST 调用，因此我开始将 GET 调用重写为 POST 调用，但随后它们停止返回模拟数据。在下面的测试函数中，我想通过 id 将数据作为 TestResponse 对象获取：

postTest(id: string): Promise<TestResponse> {
    return this.http
        .post(this.testUrl, JSON.stringify({ testId: id }), { headers: this.headers })
        .toPromise()
        .then(response => response.json().data as TestResponse)
        .catch(this.handleError);
}

还有模拟数据：

    let test = [
        { testId: 'e0d05d2b-3ec3-42ae-93bc-9937a665c4d6', missingData: 'qwerty', moreMissingData: 'asdfgh' },
        { testId: 'dccef969-b9cf-410a-9973-77549ec47777', missingData: 'qwerty', moreMissingData: 'asdfgh' },
        { testId: '20716fd7-1f50-4a12-af16-52c009bc42ab', missingData: 'qwerty', moreMissingData: 'asdfgh' }
    ];

如果我理解正确，这段代码将假定我想创建一些东西，因此将我的 testId 与 id: 1 一起反弹回来（它甚至不遵循我的数据结构）。

那么，我的问题是，如何通过 POST 调用获取我的模拟数据？

【问题讨论】：

in-memory-web-api 只是用来玩一点和熟悉框架。如果你想深入学习，你应该实现一个“真实的”假后端。看看这个例子：github.com/cornflourblue/angular2-registration-login-example/…
谢谢，这个例子效果很好。
看起来是一个很好的例子。最新版本的 Angular 和 RxJS 是否有类似的示例
是不是说我们不能伪造在内存中添加一个新数据，然后从内存模块中返回新的数据集？

标签： angular post get

【解决方案1】：

可以在内存数据服务实现中覆盖 HTTP 方法。

在被覆盖的方法（例如 POST）中，可以对集合名称做出反应（通过 RequestInfo 参数）以提供基于每个端点/集合的特定功能。

提供的示例仅处理 GET 调用：https://github.com/angular/in-memory-web-api/blob/master/src/app/hero-in-mem-data-override.service.ts

由此，重写 POST 功能可能如下所示：

import { InMemoryDbService, RequestInfo, STATUS, ResponseOptions } from 'angular-in-memory-web-api';

export class Your InMemoryDataService implements InMemoryDbService {

  // ...

  post(requestInfo: RequestInfo) {
    const collectionName = requestInfo.collectionName;
    if (collectionName === 'somedatatype') {
      // Intercept POST calls to the 'somedatatype' collection:
      // E.g. add some fields to our entity that would be set in the backend,
      const data = requestInfo.utils.getJsonBody(requestInfo.req);
      const collection = requestInfo.collection;
      data.extraField = 'hello';

      // set id to next highest number 
      data.id = collection.map(item => item.id).reduce((cur, next) => cur > next ? cur : next) + 1;

      // ... add the item to the collection
      collection.push(data);

      // forge the response
      const options: ResponseOptions = {
        body: { data  },
        status: STATUS.OK,
        headers: requestInfo.headers,
        url: requestInfo.url
      };

      // use createResponse$ to return proper response
      return requestInfo.utils.createResponse$(() => options);
    }

    // let the default POST handle all other collections by returning undefined
    return undefined; 
  }
}

【讨论】：

谢谢，太好了。救生员。