apifox超越了postman,给前端带来了哪些便利呢?

8,976 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第28天,点击查看活动详情

大家好,我是 那个曾经的少年回来了。10年前我也曾经年轻过,如今已步入被淘汰的年龄,但如下幡然醒悟,所以活在当下,每天努力一点点,来看看2024年的时候自己会是什么样子吧,2024年的前端又会是什么样子,而2024年的中国乃至全球又会变成什么样子,如果你也有想法,那还不赶紧行动起来。期待是美好的,但是更重要的是要为美好而为之奋斗付诸于行动。

1、前言

之前一直使用的时postman,或者直接使用后端提供的swagger来测试接口,一般情况下问题不大。 但又有很多事情没那么的便利,那接下来我就简单说说我这一段时间的使用感受吧。

2、下载安装

官网地址:www.apifox.cn

包含window版本、Mac版本、以及Linux版本

安装完成后,直接微信扫码登录

image.png

这里以下都是自己使用的,有什么不妥之处我们可以一起进行探讨。

3、功能分享

3.1. 接口同步

公司后端接口使用的swagger,所以这里刚好能够进行设置自动同步

image.png

有时候后端更新了接口告诉你了,你也可以进行手动临时同步过来,还是非常方便的

当然如果跟前端小伙伴一起使用,有些时候可以点击右上角的刷新,便会将团队其他人的修改同步过来。

3.2、Mock模拟

image.png

image.png 有时候,甚至很多的时候,尤其是需求刚来的时候,接口一般都不会提供的,那么这个功能就派上用场了。

开启云端Mock设置,新增加接口后,便可以直接在项目中通过axios进行访问,当然你还可以通过token进行鉴权。

image.png

封装好之后便可以在项目中进行使用。等后端接口文档或者真正的接口来了,便直接进行更换接口路径以及接口字段就可以了。

3.3、生成typeScript

找到一个具体的接口

image.png

请求头和响应体都可以生成typescript,这里生成的字段,还有注释,直接读取swagger中的备注信息,保持了跟后端接口的一致性,真的非常不错

image.png

3.4、全局header等设置

image.png

3.5、前置操作和后置操作

image.png

这里简单的举个例子,比如登录接口,返回token,存到了全局变量当中

image.png

然后全局header中可以直接使用这个全局便令token,这样就不用每个接口都去设置token,一次设置全局受用。

3.6、测试管理

测试用例时完全可以实现,多个接口根据业务需求任意组合进行串行执行,得到最终想要的结果。里面其实还有针对性能测试的尝试,感觉对于测试人员来说也是可以进行尝试的功能。

3.7、持续集成

看官网是说可以对接Jenkins,将测试用例或者测试套件导出,然后集成到Jenkeins,这样代码提交或者指定某些分支push时便可以进行自动化的测试预输出,能很好的提升开发的质量。

虽然我没使用,但是我后面肯定会进行尝试,刚好前段时间在自己的电脑上安装了jenkins。

4、总结

其实我觉得这个对于前后端做约定也是非常好的,一般都是后端先写好文档,其实可以直接在apifox中,约定好接口名称以及参数,返回数据,这样前端其实就可以通过mock调用了,后端只需要去实现接口返回真实的数据,前后端可以通过接口的状态去判断接口是否可以调用真实的接口。

更多优秀功能有待继续开发,现在已经和公司前端小伙伴一起建团队项目了,用起来真的灰常不错。针对测试管理和持续集成方面自己实践还比较少,后续会继续慢慢的来探索apifox的优秀功能。

以上便是我使用过程中比较看中的几个功能,好了让我们来一起给apifox点个赞吧。

我的个人博客:vue.tuokecat.com/blog

我的个人github:github.com/aehyok

我的前端项目:pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览:vue.tuokecat.com
github源码:github.com/aehyok/vue-…