mock 请求分发

blueju 等级 341 1 0

首发于 语雀文档

背景是这样的

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

  • 请求全部走 POST
  • 请求 URL 统一为 /agrs
  • 数据提交方式为 application/json
  • 数据格式大致分为:
    • 系统报文头
      • 服务名
      • 接口名
      • 接口版本号
      • 系统标识
    • 本地报文头
      • 用户信息
      • 分页信息
      • 设备信息
    • 报文体
      • 视具体情况而变化的动态数据
  • 文件传输走 OSS,不走表单文件流
  • ......

痛点

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

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

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

  2. 需要新 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

收藏
评论区

相关推荐

python的requests模块的使用
前言: 在web后台开发过程中,会遇到需要向第三方发送http请求的场景,python中的requests库可以很好的满足这一要求,这里简要记录一下requests模块的使用! 说明: 这里主要记录一下requests模块的如下几点: 1.requests模块的安装 2.requests模块发送get请求 3.requests模块
5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码
《前端实战总结》如何在不刷新页面的情况下改变URL
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。 背景介绍 由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想
好家伙,这些写 CSS 的新姿势你还不知道?
现在大部分搞前端的应该还是这样写 CSS 的: .mock {     margin: auto;     fontsize: 16px;     // ... } <div class'mock'mock</div 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
Retrofit 动态修改BaseUrl 操作
开发中会遇到URL需要动态切换,若你还是通过gradle打包切换是否不太灵活,下面将介绍一下retrofit基于OKhttp中动态修改URL; 原理添加拦截器,在retrofit中的现实更加灵活了如下代码: language private RetrofitUrlManager() { if (DEPENDENCY_OKHTT
在浏览器输入 URL到页面展示中间发生了什么?
这个问题是前端的经典问题,从这个问题出发我们可以从根本上了解如何解决性能优化问题 首先我们可以在开头大概了解下在浏览器输入 URL到页面展示,中间有哪些步骤: 用户从浏览器进程里输入请求信息 网络发起 URL 请求 服务器响应 URL 请求之后,浏览器进程就要开始准备渲染进程了 渲染进程准备好之后,需要先向渲染进程提交页面数据,我
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
Golang根据URL判断媒体协议
目录问题解决 问题如何根据一个流媒体地址URL判断对应的流媒体协议,比如RTMP、RTSP协议等。 解决这里提供一个方法,可以直接拿来用。 golang func getProtocol(url string) (string, error) { if url "" { index : strings.Index(url, ":")
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
mock 请求分发
首发于 <a name"vqeCn"</a 背景是这样的我们公司的后管项目走的不是 resful 风格的 api,而是走后管网关,后管网关会将请求进行分发,具体怎么分发,有这么以下几点: 请求全部走 POST 请求 URL 统一为 /agrs 数据提交方式为 application/json 数据格式大致分为: 系统报文头
React之集成测试 –测试技巧
React 组件的常见测试模式。 注意: 此章节假设你正在使用 作为测试运行器。如果你使用不同的测试运行器,你可能需要调整 API,但整体的解决方案是相同的。在章节阅读更多关于设置测试环境的细节。在本章中,我们将主要使用函数组件。然而,这些测试策略并不依赖于实现细节,它对于 class 组件也同样有效。
升级dubbo,小心default.version
上周遇到个关于升级dubbo 2.6 到2.7的兼容性问题,差点造成线上故障,这里记录下,也给大家提个醒。 问题回放有一个接口的提供方(dubbo 2.6.6)这么配置接口的版本号xml<dubbo:provider version"1.0.0"/消费方(也是dubbo 2.6.6)的reference这么配置xml<dubbo:
一次搞懂-JavaScript之异步编程
前言异步,就是非同步....这节内容可能会有点枯燥,但是却是 JavaScript 中非常重要的概念,非常有必要去学习。 目的 提升开发效率,编写易维护的代码 引子问题 请求时候为什么页面卡死??js$.ajax( url: "www.xx.com/api", async: false, // true success: function(result
分别用python2和python3伪装浏览器爬取网页内容
python网页抓取功能非常强大,使用urllib或者urllib2可以很轻松的抓取网页内容。但是很多时候我们要注意,可能很多网站都设置了防采集功能,不是那么轻松就能抓取到想要的内容。今天我来分享下载python2和python3中都是如何来模拟浏览器来跳过屏蔽进行抓取的。最基础的抓取:! /usr/bin/env python codingutf8 @Au