乐趣区

关于javascript:mock-请求分发

jiezi

首发于 语雀文档

背景是这样的

咱们公司的后管我的项目走的不是 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

退出移动版