Angular2-将POST与angular-in-memory-web-api结合使用 [英] Angular2 - Using POST with angular-in-memory-web-api

问题描述

我正在使用Angular 2的angular-in-memory-web-api.到目前为止，我仅使用GET调用，并且运行良好.

I am playing around with angular-in-memory-web-api for Angular 2. So far I have only been using GET calls and it's working well.

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

The API I'm going to call is only using POST calls so I began rewriting my GET calls to POST calls, but then they stopped returning the mock data. In my test function bellow, I want to get the data as a TestResponse object by an id:

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(甚至不遵循我的数据结构)一起弹回.

If I understand this right, this code will assume that I want to create something and is therefor bouncing my testId back together with id: 1 (which doesn't even follow my data structure).

所以，我的问题是，如何通过POST调用获取模拟数据?

So, my question is, how can I get my mock data with POST calls?

推荐答案

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

It is possible to override HTTP methods in your in memory data service implementation.

在重写方法(例如POST)中，可以对集合名称做出反应(通过RequestInfo参数)，以基于每个端点/集合提供特定功能.

In the overridden method (e.g POST), it is possible to react to the collection name (via the RequestInfo parameter) to provide specific functionality on a per-endpoint/collection basis.

提供的示例仅处理GET调用:

A provided example deals with GET calls only: https://github.com/angular/in-memory-web-api/blob/master/src/app/hero-in-mem-data-override.service.ts

由此，重写POST功能可能看起来像这样:

From that, overriding the POST functionality could look like this:

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

这篇关于Angular2-将POST与angular-in-memory-web-api结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！