mock 请求分发

Posted 2021-09-25 blueju

首发于 语雀文档

背景是这样的

我们公司的后管项目走的不是 resful 风格的 api，而是走后管网关，后管网关会将请求进行分发，具体怎么分发，有这么以下几点：

• 请求全部走 POST
• 请求 URL 统一为 /agrs
• 数据提交方式为 application/json

• 数据格式大致分为：

  • 系统报文头

    • 服务名
    • 接口名
    • 接口版本号
    • 系统标识

  • 本地报文头

    • 用户信息
    • 分页信息
    • 设备信息

  • 报文体

    • 视具体情况而变化的动态数据
• 文件传输走 OSS，不走表单文件流
• ......

痛点

我们前端当然是不可能等后端开发完了才开始写代码的嘛，因此我们需要 mock，然而网关请求分发因为以上的诸多要求，使得 mock 开发十分不方便，有以下：

1. 按传统方式创建 mock，那么请求 URL 开发的时候是一套，打包的时候又要全部改成 /agrs，这。。。

我希望的是开发时和打包时都是一样的，不需要改来改去两套标准

1. 需要新 mock 时，按照 umi 的 mock 规范，需要在 mock 文件夹中创建一个 js 文件，并默认暴露一个对象，例如：

mock/getApps.js

export default {
    "POST /getApps": {
      sysHead: {},
    localHead: {},
    body: {},
  }
}

需要多次写重复代码和重复数据结构（sysHead，localHead），而我只想关注 body 中的 mock 数据

我们的是 umi 工程，mock 这块详见 Mock 数据

1. 按照第 2 点，当后端接口的服务名&接口名真正提供后，为了保持一致，我们除了要修改 mock 文件名，还需要修改 mock 文件中所暴露对象中的 URL 名称，麻烦。
2. 要做到第 3 点，还得有个前提，就是 mock 文件名是与该 mock 所拦截的 URL 是一致的，不然那么多接口看都看不过来，找起来甚是痛苦眼瞎。
3. 以 js 暴露模块的方式进行 mock，拦截同一 URL 的 mock 是可以被覆盖而不自知的，不清楚的人会出现明明 mock 的 URL 都正确但响应数据却对不上，这种一头雾水的情况
4. ......

以上不方便，不是凭空想的，因为是付出了时间、人力，得出的确不方便这个结论的，光是以上第一点，就已经够受了。

解决

总体的思路就是：
只拦截 /agrs 这个 URL，使用 node.js 获取请求报文 request 中的参数服务名和接口名，按设计好的目录结构拼接路径，按路径读取文件并 JSON 格式化，最后返回。


对应以上痛点的解决措施：

1. 开发时和打包时保持一致，都是用统一 URL：/agrs。
2. 不使用 js 暴露模块的方式，直接使用 json 文件，其中放置重点关注的 json 格式 mock 数据，其他重复数据结构会在别处统一整合。
3. 所设计的目录规范是：目录名称就是服务名，mock 文件名称就是接口名。（第 2 点已提及不需再定义和暴露，因此如果修改不必之前那么麻烦，只需要修改目录名称和文件名称即可）
4. 在任何系统中，同一目录下是不能出现同名文件夹或同名文件的，按第 3 点的目录规范可解决重复覆盖问题，还能重复别人已有接口。

其他不多说了，直接上 github，也不是人人都会碰到这种情况，只是帮助内部前端小组提升开发体验的一个小工具库而已，也是作为一个前端小组长该做的事。

代码不复杂，自我感觉更重要的是，不论遇到大小问题，会去想怎么解决比较好，不断总结，不断积累吧。

Github

https://github.com/blueju/mock-request-distribute