Angular 5 InMemoryWebAPI：如何用HTTP动词模拟CRUD并自定义响应

嘿，我刚好对Angular的In-memory Web API这块熟得很，给你一步步说怎么改哈！

默认的InMemoryDbService确实只提供了数据定义的能力，但我们可以通过扩展它、重写对应请求方法的方式，让PUT/POST/DELETE返回你想要的带状态的JSON结构，同时保留GET请求的原始数据响应。

下面是修改后的in-memory-data.service.ts完整代码，我会在后面拆解关键逻辑：

import { Injectable } from '@angular/core';
import { InMemoryDbService, RequestInfo, ResponseOptions } from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
  // 保留原始的数据库数据定义，这是模拟数据的基础
  createDb() {
    const heroes = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' }
      // 这里可以添加你自己的模拟数据
    ];
    return { heroes };
  }

  // 重写POST方法，返回自定义状态格式
  post(reqInfo: RequestInfo) {
    return reqInfo.utils.createResponse$(() => {
      // 先执行默认的POST逻辑，完成数据库操作
      const defaultResponse = reqInfo.utils.getJsonBody(reqInfo.utils.handleRequest(reqInfo));
      
      // 根据默认响应的状态码判断操作结果
      let success = true;
      let error = '';
      if (defaultResponse.status >= 400) {
        success = false;
        error = `创建失败：${defaultResponse.statusText}`;
      }

      // 返回自定义格式的响应，同时保留原始的HTTP状态、头等信息
      return {
        body: { success, error, data: defaultResponse.body },
        status: defaultResponse.status,
        headers: defaultResponse.headers,
        url: defaultResponse.url
      } as ResponseOptions;
    });
  }

  // 重写PUT方法，逻辑和POST基本一致
  put(reqInfo: RequestInfo) {
    return reqInfo.utils.createResponse$(() => {
      const defaultResponse = reqInfo.utils.getJsonBody(reqInfo.utils.handleRequest(reqInfo));
      
      let success = true;
      let error = '';
      if (defaultResponse.status >= 400) {
        success = false;
        error = `更新失败：${defaultResponse.statusText}`;
      }

      return {
        body: { success, error, data: defaultResponse.body },
        status: defaultResponse.status,
        headers: defaultResponse.headers,
        url: defaultResponse.url
      } as ResponseOptions;
    });
  }

  // 重写DELETE方法，注意DELETE通常没有返回数据，所以可以简化响应体
  delete(reqInfo: RequestInfo) {
    return reqInfo.utils.createResponse$(() => {
      const defaultResponse = reqInfo.utils.getJsonBody(reqInfo.utils.handleRequest(reqInfo));
      
      let success = true;
      let error = '';
      if (defaultResponse.status >= 400) {
        success = false;
        error = `删除失败：${defaultResponse.statusText}`;
      }

      return {
        body: { success, error },
        status: defaultResponse.status,
        headers: defaultResponse.headers,
        url: defaultResponse.url
      } as ResponseOptions;
    });
  }

  // 如果你想让GET请求也返回同样的状态格式，就解开下面的注释
  // get(reqInfo: RequestInfo) {
  //   return reqInfo.utils.createResponse$(() => {
  //     const defaultResponse = reqInfo.utils.getJsonBody(reqInfo.utils.handleRequest(reqInfo));
  //     return {
  //       body: { success: true, error: '', data: defaultResponse.body },
  //       status: defaultResponse.status,
  //       headers: defaultResponse.headers,
  //       url: defaultResponse.url
  //     } as ResponseOptions;
  //   });
  // }
}

关键逻辑说明： #

• 我们依然保留createDb()方法定义模拟数据，这是In-memory Web API的基础。
• 重写post/put/delete时，先调用reqInfo.utils.handleRequest(reqInfo)执行默认的数据库操作，拿到原始响应结果。
• 根据原始响应的状态码判断操作是否成功：状态码≥400时标记为失败，同时生成对应的错误信息。
• 最后把自定义的{success, error, data?}结构作为响应体返回，同时保留原始的HTTP状态、头等信息，保证前端能正常处理请求状态。

额外技巧：模拟特定错误场景 #

如果你想模拟后端可能出现的特定错误（比如ID重复、权限不足），可以在对应方法里加自定义判断，比如在POST方法里：

// 模拟ID重复错误
if (reqInfo.collectionName === 'heroes' && reqInfo.body.id === 11) {
  success = false;
  error = '数据库错误：ID已存在';
}

另外你提到生产环境用PHP，完全不用担心这个修改会影响线上环境——In-memory Web API只在开发环境生效，上线时只要移除对应的模块导入即可，和真实后端完全兼容。

内容的提问来源于stack exchange，提问作者DrDamnit