后端开发工具API设计【免费下载链接】rap2-delos阿里妈妈前端团队出品的开源接口管理工具RAP第二代项目地址https://gitcode.com/gh_mirrors/ra/rap2-delos点击查看免费下载本指南围绕 RAP2 前端插件库public/libs/中提供的两种接口拦截方式展开说明如何在前端页面中引入脚本让运行中的业务代码自动切换到 RAP2 的 Mock 数据源。读完本文你将掌握jquery.rap.js转发至 RAP2 服务器与mock.rap.js本地直接返回数据两种模式的工作原理、接入步骤与适用场景并能结合 RAP2 服务端/app/plugin/:repositories与/app/mock/...接口理解完整的数据链路。一、两种拦截方式总览RAP2 在前端仓库中提供了两套可直接引用的拦截脚本二者的核心差异在于“匹配到接口后数据从哪来”脚本拦截机制命中后行为依赖jquery.rap.js复写jQuery.ajax将请求转发至 RAP2 服务器由 RAP2 返回 Mock 数据jQuery RAP 插件/app/plugin生成的脚本mock.rap.js注册到 Mock.js直接返回itf.response的 Mock 数据不发起网络请求Mock.js RAP 插件需要说明的是仓库中还提供了第三份脚本 fetch.rap.js其原理与jquery.rap.js完全一致只是拦截对象从jQuery.ajax换成了全局window.fetch适用于不使用 jQuery 的现代前端工程。下文会一并展开。二、拦截前置条件先加载 RAP 插件两种拦截脚本都不会自己拉取接口定义它们依赖一个全局对象window.RAP。这个对象由 RAP2 服务端动态生成let RAP window.RAP || { protocol: ${protocol}, host: ${host}, interfaces: {} } RAP.interfaces[repositoryId] interfaces window.RAP RAP即每个仓库对应RAP.interfaces[repositoryId]下的一个接口数组数组中每个元素形如{ id: 12, name: 获取用户列表, method: GET, url: /api/users, request: {...}, response: {...} }加载插件脚本的 URL 是/app/plugin/:repositories支持逗号分隔多个仓库 ID。服务端实现位于 src/routes/mock.ts它查询仓库及其协同仓库collaborators下的全部接口把属性树还原成request/response模板再拼接出一段可执行 JS 返回给浏览器。测试页 test.plugin.jquery.html 展示了标准加载顺序$.getScript(/app/plugin/${id[1]}).then(() { $.getScript(/libs/jquery.rap.js).then(() { doRequest(window.RAP) }) })务必先加载插件脚本再加载拦截脚本否则脚本入口处会打印请先引入 RAP 插件的警告并直接退出见 jquery.rap.js 与 mock.rap.js。三、模式一jquery.rap.js——转发至 RAP2 服务器3.1 工作流程jquery.rap.js 的核心思路是保存原始的jQuery.ajax引用然后用自定义函数整体替换对命中的请求“改道”到 RAP2 的 Mock 地址参数归一化兼容$.ajax(settings)与$.ajax(url, settings)两种调用形式统一为settings对象未指定 method 时默认GET接口匹配遍历RAP.interfaces中所有仓库的所有接口按method忽略大小写与url精确相等进行匹配未命中透传匹配不到时调用原始的next.call(jQuery, url, settings)业务请求不受影响命中转发把请求改写成 RAP2 Mock 地址后重新走 jQuery 的 ajax 链路。命中后的关键改写逻辑let redirect ${RAP.protocol}://${RAP.host}/app/mock/${match.repositoryId}/${match.method}/${match.url} settings.method GET settings.dataType jsonp console.log(jQuery ${match.method} ${match.url} ${redirect}) return next.call(jQuery, redirect, settings)注意两个细节跨域解决方案转发请求被强制改为GETjsonp借此绕过浏览器同源策略调试友好每次命中都在控制台输出jQuery GET /api/users http://.../app/mock/1/GET/api/users形式的日志方便确认拦截是否生效。3.2 服务端响应/app/mock/:repositoryId/:method/:url路由在 src/routes/mock.ts 中注册统一交给MockService.mock(ctx, { forceVerify: true })处理。src/service/mock.ts 中的关键逻辑包括URL 归一化url参数支持带或不带前导斜杠如GET/api/users与api/users并可识别 URL 前缀中的get/post/delete/put来推断请求方法REG_URL_METHOD接口匹配先按method 模糊 URL 匹配若命中多个则依次按“去掉参数的相对路径精确比对”、“请求参数键值比对”两级收敛src/service/mock.ts协同仓库兜底支持在协同仓库的接口中继续匹配多个结果时优先返回当前仓库的src/service/mock.tsRESTful 匹配普通匹配失败时还会尝试用 URL 规则正则urlUtils.getUrlPattern做 RESTful 匹配并把匹配结果合并去重src/service/mock.ts响应模板渲染取出该接口scope: response的属性树应用仓库级默认值DefaultVal覆盖再渲染成 JSON 返回src/service/mock.ts。3.3 重复接口预警jquery.rap.js在安装拦截器之前还会先扫描一次接口定义以method url为 key 统计发现重复时在控制台分组打印警告提示访问在线编辑器修复jquery.rap.js。服务端生成插件时同样会做重复检测并注入console.warnsrc/routes/mock.ts双重保障下重复定义很容易被发现。四、模式二mock.rap.js——本地直出 Mock 数据mock.rap.js 走的是完全不同的路线它不修改任何网络请求而是把每个接口注册到 Mock.js 的规则表里让 Mock.js 在本地完成“拦截 造数”for (let repositoryId in RAP.interfaces) { for (let itf of RAP.interfaces[repositoryId]) { Mock.mock(itf.url, itf.method.toLowerCase(), (settings) { console.log(Mock ${itf.method} ${itf.url} , itf.response) return Mock.mock(itf.response) }) } }要点解读注册粒度为RAP.interfaces中每一个接口调用一次Mock.mock(url, method, handler)method 统一转为小写数据来源handler 返回Mock.mock(itf.response)——即对插件脚本里携带的response模板再做一次 Mock 渲染支持模板中的占位规则如integer、string等 Mock.js 语法零网络开销请求不会离开浏览器适合后端未就绪、前端先行开发联调的场景依赖页面必须引入 Mock.js测试页用的是nuysoftMock/1.0.1-beta3见 test.plugin.mock.html。五、补充模式fetch.rap.js——拦截 Fetch 请求对于不依赖 jQuery 的工程fetch.rap.js 提供了等价能力保存原始window.fetch命中时改写为 RAP2 Mock 地址未命中时透传。与 jQuery 版本的区别仅在于命中后额外设置settings.credentials include确保转发请求携带 Cookie对应跨域会话场景日志前缀为Fetch ...便于与 jQuery 模式区分。六、接入步骤与测试验证6.1 完整接入步骤在 RAP2 中确认仓库 ID浏览器地址栏或仓库页可看到页面中依次引入依赖与脚本以 jQuery 模式为例!-- 1. 依赖jQuery示例使用 RAP2 测试页同款版本 -- script src//g.alicdn.com/thx/brix-deps/jqueryjquery/1.12.4/dist/jquery.js/script !-- 2. RAP 插件拉取仓库 1 的接口定义 -- script src/app/plugin/1/script !-- 3. 拦截脚本 -- script src/libs/jquery.rap.js/script打开浏览器控制台确认无请先引入 RAP 插件/请先引入 jQuery警告且能看到命中日志。6.2 仓库自带测试页仓库在 public/test 目录下提供了三份可交互验证的测试页入口为 index.html测试页对应拦截脚本说明test.plugin.jquery.htmljquery.rap.js依次加载插件与拦截脚本再调用doRequest(window.RAP)test.plugin.mock.htmlmock.rap.js需先引入 Mock.js验证本地直出test.plugin.fetch.htmlfetch.rap.js将window.fetch传入doRequest的第二个参数公共测试逻辑在 test.request.js 中遍历RAP.interfaces逐个发起请求把返回的 JSON 渲染到页面上。注意测试页通过location.search中的id参数指定仓库默认值为1const id /id(\d)/.exec(location.search) || [, 1]。七、两种模式的选型建议需要真实网络链路、验证参数校验与后端交互选jquery.rap.js或fetch.rap.js。转发到 RAP2 后还会执行必填参数校验——当forceVerify开启且请求缺少必填参数时响应头会带上X-RAP-WARNING: Required parameter xxx has not be passed in.src/service/mock.ts这对联调期排查参数问题非常有价值。纯前端快速原型、后端完全不可用选mock.rap.js。零网络请求、零跨域问题数据完全本地生成速度最快适合页面开发初期。两种脚本可以并存使用例如开发环境引入jquery.rap.js走 RAP2 数据测试环境切换为mock.rap.js脱离服务器自测二者互不冲突切换成本仅是调整一个script标签。八、补充RAP2 的其他 Mock 数据端点除插件拦截链路外RAP2 服务端还暴露了若干可直接调用的 Mock 端点均定义于 src/routes/mock.ts可作为拦截脚本之外的补充手段/app/mock/template/:interfaceId返回接口的响应模板支持scoperequest|response查询参数/app/mock/data/:interfaceId直接渲染返回真实 Mock 数据且支持请求参数引用将 query 与 body 注入模板渲染/app/mock/schema/:interfaceId返回接口属性的 JSON Schema/app/mock/tree/:interfaceId返回接口属性的原始树结构/app/mock-noverify/:repositoryId/:url与/app/mock等价但不做必填校验forceVerify: false。理解了这些端点后可以更清楚地看到jquery.rap.js本质上是把浏览器里的真实请求“重定向”到/app/mock/...这一组端点而mock.rap.js则是把插件里携带的response模板在本地用 Mock.js 渲染——两条路径共享同一份接口定义只是数据产出的位置不同。赞分享后端开发工具API设计【免费下载链接】rap2-delos阿里妈妈前端团队出品的开源接口管理工具RAP第二代项目地址https://gitcode.com/gh_mirrors/ra/rap2-delos点击查看免费下载相关推荐Playwright WebSocketRoute 深度指南WebSocket 路由、Mock、拦截与源码实现Playwright WebSocketRoute 深度指南WebSocket 路由、Mock、拦截与源码实现 本文围绕 Playwright 的 WebSo测试开发工具浏览器控制Puppeteer 请求拦截优先级详解:DEFAULT_INTERCEPT_RESOLUTION_PRIORITY 与合作式拦截模式Puppeteer 请求拦截优先级详解:DEFAULT_INTERCEPT_RESOLUTION_PRIORITY 与合作式拦截模式 DEFAULT_INTER浏览器控制测试网页爬虫开发工具Puppeteer 请求拦截完全指南从基础拦截到 Cooperative Intercept Mode 协作式拦截Puppeteer 请求拦截完全指南从基础拦截到 Cooperative Intercept Mode 协作式拦截 /DSMLtool /DS浏览器控制测试网页爬虫开发工具上一篇IPXWrapper让经典游戏重获网络生命的终极方案下一篇如何永久保存微信聊天记录WeChatMsg开源工具完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考