前言

在网站的开发过程中,接口联调和测试是至关重要的一环,其直接影响产品的核心价值,而目前也有许多技术方案和工具加持,让我们的开发测试工作更加便捷。接口作为数据传输的重要载体,数据格式和内容具有多样性,从宏观的角度上看,分为成功和失败,这两种状态又可以细分,例如失败对应的状态码有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 className="App">
<Main />
<ApiHook
autoFilter
defaultVisiable
allowOrigins={['http://localhost:3000']}
/>
</div>
);
}
......
ReactDOM.render(
<React.StrictMode>
<App />
</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
})
}
}
......
}

mockjs

mockjs将原生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吧,有问题欢迎交流。

福禄ICH·架构组
福袋

api-hook,更轻量的接口测试工具的更多相关文章

  1. Riot - 比 Facebook React 更轻量的 UI 库

    Riot 是一个类似 Facebook React 的用户界面库,只有3.5KB,非常轻量.支持IE8+浏览器的自定义标签,虚拟 DOM,语法简洁.Riot 给前端开发人员提供了除 React 和 P ...

  2. 比Wireshark更轻量、更方便的抓包软件:Charles

    转:http://blog.csdn.net/lixing333/article/details/42776187 之前写过一篇通过Wireshark进行抓包,分析网络连接的文章<通过WireS ...

  3. Crawlab Lite 正式发布,更轻量的爬虫管理平台

    Crawlab 是一款基于 Golang 的分布式爬虫管理平台,产品发布已经一年有余,经过开发团队的不断打磨,即将迭代到 v0.5 版本.在这期间我们为 Crawlab 加入了大量社区用户共同期望的功 ...

  4. 更轻量的 View Controllers

    iew controllers 通常是 iOS 项目中最大的文件,并且它们包含了许多不必要的代码.所以 View controllers 中的代码几乎总是复用率最低的.我们将会看到给 view con ...

  5. 不用webservice wcf提供服务,用Rest更轻量

    从2005年开始就开始有基于服务的开发方式,到08年时候 微软和sun等公司都已经提供了很多基于服务的开发框架 . 微软 .net 平台的基于服务的框架主要有:.NET Remoting.webser ...

  6. kubernets轻量 contain log 日志收集技巧

    首先这里要收集的日志是容器的日志,而不是集群状态的日志 要完成的三个点,收集,监控,报警,收集是基础,监控和报警可以基于收集的日志来作,这篇主要实现收集 不想看字的可以直接看代码,一共没几行,尽量用调 ...

  7. 接口测试工具-Jmeter使用笔记(一:运行一个HTTP请求)

    博主自从毕业从事软件测试行业距今一年半时间,大多数时间都在跟各种API打交道,使用过的接口测试工具也有许多,本文记录下各工具的使用心得,以及重点介绍我在工作中是如何使用Jmeter做测试的,都是在wi ...

  8. faked 一个用于 mock 后端 API 的轻量工具

    一.简介 faked 是一个在前端开发中用于 mock 服务端接口的模块,轻量简单,无需要在本地启动 Server 也无需其它更多的资源,仅在浏览器中完成「请求拉截」,配合完整的「路由系统」轻而易举的 ...

  9. CYQ.Data 轻量数据层之路 优雅V1.4 现世 附API帮助文档(九)

    继上一版本V1.3版本发布到现在,时隔N天了:[V1.3版本开源见:CYQ.Data 轻量数据层之路 华丽V1.3版本 框架开源] N天的时间,根据各路网友的反映及自身的想法,继续修改优化着本框架,力 ...

随机推荐

  1. 必须掌握的分布式文件存储系统—HDFS

    HDFS(Hadoop Distributed File System)分布式文件存储系统,主要为各类分布式计算框架如Spark.MapReduce等提供海量数据存储服务,同时HBase.Hive底层 ...

  2. socket 参考文档

    socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on('connec ...

  3. Jenkins持续集成报告列表显示不正确的问题解决

    利用robotframework+jenkins对系统进行持续集成,近段时间发现某一系统的Jenkins报告输出列表显示的执行用例数量不对.如图: 经检查发现Configure -- Post-bui ...

  4. 你不知道的那些js调试命令

    通常情况下,我们在调试js程序的时候一般都使用console.log()来进行程序的调试,打印自己所需要的内容什么的. 那么js的调试命令可不止一个console.log() 分类输出 console ...

  5. STM32入门系列-创建寄存器模板

    介绍如何使用 KEIL5 软件创建寄存器模板, 方便之后使用寄存器方式来操作STM32开发板上的LED,让大家创建属于自己的寄存器工程模板. 获取工程模板的基础文件 首先我们在电脑任意位置创建一个文件 ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. LWJGL3的内存管理,第三篇,剩下的两种策略

    LWJGL3的内存管理,第三篇,剩下的两种策略 上一篇讨论的基于 MemoryStack 类的栈上分配方式,是效率最高的,但是有些情况下无法使用.比如需要分配的内存较大,又或许生命周期较长.这时候就可 ...

  8. 计算机网络-DHCP协议抓包分析总结

    前置问题:什么是(网络)协议? 网络协议为计算机网络中进行数据交换而建立的规则.标准或约定的集合. 而且: 一个网络协议至少包括三要素: 语法:用来规定信息格式;数据及控制信息的格式.编码及信号电平等 ...

  9. Java入门(5)

    阅读书目:Java入门经典(第7版) 作者:罗格斯·卡登海德 protected变量只能在其所在的类,该类的子类,以及同一个包里的其他类中使用.包是一组用于完成相同目标的相关类. private变量只 ...

  10. 解Bug之路-NAT引发的性能瓶颈

    解Bug之路-NAT引发的性能瓶颈 笔者最近解决了一个非常曲折的问题,从抓包开始一路排查到不同内核版本间的细微差异,最后才完美解释了所有的现象.在这里将整个过程写成博文记录下来,希望能够对读者有所帮助 ...