什么软件可以做网站,公司网站设计案例,网站免费观看,一个简单的app多少钱前言在网站的开发过程中#xff0c;接口联调和测试是至关重要的一环#xff0c;其直接影响产品的核心价值#xff0c;而目前也有许多技术方案和工具加持#xff0c;让我们的开发测试工作更加便捷。接口作为数据传输的重要载体#xff0c;数据格式和内容具有多样性#xf… 前言在网站的开发过程中接口联调和测试是至关重要的一环其直接影响产品的核心价值而目前也有许多技术方案和工具加持让我们的开发测试工作更加便捷。接口作为数据传输的重要载体数据格式和内容具有多样性从宏观的角度上看分为成功和失败这两种状态又可以细分例如失败对应的状态码有5/4不同的状态码代表的问题是不一样的都需要一一考虑成功返回后所有字段返回结果又是排列组合形式那么问题就来了是否能在条件容许的情况下快速覆盖所有的场景呢从技术的角度上讲问题不大但是有时候成本却有点高那怎么以一种低成本的方式快速实现呢本文将围绕这个问题展开讨论并尝试提供一种解决方案。现状前面说到了工作中遇到的接口测试场景当然目前也有很多工具可以帮我们实现接口的测试如使用广泛的postman和fiddler等工具功能强大可安装插件或自定义脚本解决数据测试的问题比如我们想要mock服务参考https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/ 即可网上也有很多使用教程如果愿意花些时间的话一定能给工作带来效率的提升好吧前提是你要花些时间。api-hook优势1.开箱即用有时候我只想简单修改一下接口数据但是需要我安装软件找教程捣腾半天时间花费了效率却降低了api-hook引入项目中通过简单配置(真的很简单)即可使用所有操作所见即所得没有学习成本2.轻量方便工具足够轻量不需要另起服务不需要单独维护它就是你页面的一部分而已你可以像控制一个div一样去控制它工具介绍1.工具演示功能说明【1】是接口拦截/mock的切换区域【2】可以关闭api-hook工具面板【3】是工具面板显示/隐藏开关接口拦截当工具面板可见且处于接口拦截模式下所有发起ajax请求的接口返回页面前都会被拦截当前处于编辑的接口处于接口请求列表第一位置且背景有斑马线滚动动画如果后续有其他接口响应被捕获那么新的拦截接口处于编辑等待的状态背景呈现淡蓝色有底部位移动画提示。当接口编辑完成点击【确定】后处于编辑等待状态的接口会自动切换成编辑模式当然也可以自行切换。接口mock接口mock集成mockjs的功能因此template配置可参考mockjs官网说明这里需要说明的是template字段需要遵循JSON格式规范。2.环境要求该工具采用react开发适用的项目也要求使用react技术框架此外工具会拦截所有ajax请求因此确保你使用的接口请求是通过ajax发出的。3.使用方式安装npm包npm install api-hook组件导入在项目入口文件引入组件import ApiHook from api-hook;function App() {return (div classNameAppMain /ApiHookautoFilterdefaultVisiableallowOrigins{[http://localhost:3000]}//div);}......ReactDOM.render(React.StrictModeApp //React.StrictMode,document.getElementById(root));4.其他说明支持响应类型接口的响应类型目前只支持text/json因此接口如果是documentblobarraybuffer等类型则工具不做处理组件参数||~属性||~说明||~默认值||||autoFilter ||是否默认拦截接口 || false||||defaultVisiable ||工具面板是否默认可见 ||false ||||allowOrigins ||容许开启工具功能的站点为数组类型只有配置此项才能在项目中使用工具 || ||研发介绍1.流程设计工具提供了两种模式接口mock和接口拦截不同的模式内部流程稍有不同具体如下接口拦截模式下所有需要被拦截的接口响应都会被api-hook劫持而不会对请求流程做任何处理。在工具提供的界面上可以修改响应状态码和接口的具体内容在接口mock模式下就是通过mockjs实现数据的模拟mockjs通过自定义MockXMLRequest代理所有匹配请求实现数据的响应。2.XMLHttpRequest代理由于需要修改XMLHttpRequest的默认行为因此项目代码实际访问的是其代理对象在接口拦截/mock下都是重写XMLHttpRequest对象具体实现通过ajax-hook和mockjs来实现接下来我们探究一下其中原理ajax-hook在接口拦截模式通过ajax-hook提供接口代理XMLHttpRequest原生对象监听所有原生xhr对象属性确保ajax-hook回调先执行其次是ajax请求的回调;XMLHttpRequest function () {var xhr new window[realXhr];for (var attr in xhr) {var type ;try {type typeof xhr[attr]} catch (e) {}if (type function) {// hookAjax methods of xhr, such as open、send ...this[attr] hookFunction(attr);} else {Object.defineProperty(this, attr, {get: getterFactory(attr),set: setterFactory(attr),enumerable: true})}}......}mockjsmockjs将原生XMLHttpRequest保存在window._XMLHttpRequest属性上声明一个MockXMLHttpRequest对象该对象模拟了XMLHttpRequest的行为和方法当我们使用Mock.mock(…)api时执行window.XMLHttpRequest XHR这里XHR就是MockXMLHttpRequest代理对象切换工具在不同模式下使用不同的代理对象在切换拦截和mock的时候需要执行重置原生XMLHttpRequest和初始化代理对象// mock模式registerMock() {unProxy(); // 解除ajax-hook代理const { mockList } this.state;mockList.forEach(({ url, template }) {Mock.mock(url, template); // mock注册});}// 拦截模式unRegisterMock() {if (window._XMLHttpRequest) { // mock代理重置原生ajax对象window.XMLHttpRequest window._XMLHttpRequest;}ajaxProxy(); // 启用ajax-hook代理}最后该工具可供前端开发人员和测试人员使用力求提供一种更便捷的方式去实现数据的个性化修改。此次只推出了基础功能后续还将加入更多新特性本仓库地址https://github.com/lanpangzi-zkg/api-hook 如果觉得还行就点个star吧有问题欢迎交流。
