作为前端开发，我是如何使用Apifox

1. 前言

八青妹在项目开发中之前一直用的postman，在开发阶段，与后端进行接口联调的时候，发现一些经验不足的后端根本就不使用postman,一些有五年以上工作经验的后端使用postman，也是复制一个完整的api请求，录入参数，然后调试，根本没有在postman上管理接口请求的概念，下次再用的时候，就重新录入完整的api，完全不在意之前有没有请求过，一些重复的劳动，他们并不在意。只负责写，不负责测，调试也是通过前端搭建好了页面，发送请求后，再去调试......作为前端开发，遇到这种情况，窝火，但是又拿他们没办法！

前后端使用的接口文档是swagger，但是也只是将它当做接口文档使用。

前端项目中用来mock数据使用的是mockjs,在接口未实现前，用来执行交互逻辑。

有一天，突然被一张图吸引住了，从此一发不可收拾，粉了Apifox。

简直是为八青妹所在的项目组量身定制！免费版本的功能完全够用！支持web端操作，但是建议下载客户端Apifox官网,毕竟开发和测试阶段用的太频繁了，还是客户端方便的多。

按照下载提示的流程一步步安装后发现，Apifox还提供了示例团队和示例项目，简直不要太贴心❤️！

现在，我们根据官网提供的示例项目，从文档、调试、mock数据和自动化测试这四个角度来看下怎么去使用吧！

2. API文档

打开提供的示例项目 看到根目录下就一个文档，可编辑。也就是说，也可以将Apifox做为文档管理的工具，项目组内共享的文档，随时可翻阅。点击左上角的编辑按钮，工具栏的最后两个功能关注下。

• 插入项目内接口/文档

点击后会弹窗展示面板，面板里面是当前项目所有的文档和接口，单选后，点击确定，会在文档中生成一个超链接，点击后，会在tab窗口中快速打开选择的文档或接口。所以用来做多个接口的联合文字说明再合适不过了。

• 插入

可以让文档的排版颜色更丰富一些，用不同的高亮颜色去区分需要注意的点，还可以像html那样增加tab，与文档的互动变得有意思，当文章过长，也可以用折叠的方式让其默认折叠。在数据模型中的数据结构也可以插入进来，以文档的方式展示等等。

八青妹在Apifox的根目录添加的文档为跟当前项目相关的基本信息，以及一些需要注意的环境变量。大家可以根据项目添加文档。文档可以解决很多无效沟通和重复阐述的烦恼！

当然，接口文档的自动生成和接口说明都是很好的功能，能就指定的api进行有效沟通，这块功能齐全，手指头点点就会操作了。

3. API调试

3.1 测试用例的使用

点开第一个接口可以看到如下所示，官网上已经给出了分区描述。

通过接口用例，可以有不同入参保存的渠道。思路打开，像我们做后台管理系统，通常涉及到多个角色的登录，那按照角色保存为用例去调用登录接口，不用每次都更改入参后再调用接口。所以，这个功能在调试中强推~

3.2 接口同步

很多情况下，后端直接生成了api文档，可以直接导入到Apifox项目中。例如java开发工程师常用的编辑器IntelliJ IDEA，可安装Apifox Helper上传接口到Apifox

如果原本使用的是在线swagger文档，那么连后端都不需要劳烦了，自己就可以将swagger上面的文档同步过来。官网上有案例写的很详细，操作起来也是非常简单，点击之前使用 Swagger 来管理 API，如何迁移到 Apifox？查看，里面讲解的方式三就是通过 IDEA 插件一键上传。

4. API数据mock

☆☆☆☆☆重点来了，Apifox的mock数据的功能不要太适合前端开发工程师，用了这个之后，直接废弃使用项目中的mockjs。例如，八青妹所在的其中一个项目使用了Mock.js,作用就是，在开发阶段，后端的接口尚未开发完成，前端可以模拟后端的接口及字段，先行模拟联调。所以接口字段要前后端约定好一致。后端如果更改了字段规则等，就要再告诉你，你再去代码里面改。好是挺好的，就是不够好。大部分前端开发都懒得用Mockjs，他们宁愿等一等，等后端开发好了，再一起联调，这些前端根本就说不动，说不动一点。导致mockjs的例子不齐，要模拟数据复现生产问题的时候，还得让后端开发去生产上捞一份数据同步到非生产环境中才能复现。

直到八青妹接触了Apifox的mock数据功能。上述遇到的问题就迎刃而解。

• 后端定义好接口的结构后就可以同步数据模型和接口到Apifox中。
• 使用本地mock和mock期望的功能，打通mock数据到项目的壁垒。

前提是接口中的响应定义必须是完整的，这样才能够通过响应中的字段来定义它的Mock规则（除非是自己手动新增的接口，同步过来的接口一般都有响应定义），可参照下图示例定义mock数据规则：

可以看到，响应定义中的第三列就是Mock ，使用过Mockjs的小伙伴肯定觉得很亲切，@natural 表示随机生成一个自然数，@cword(3) 表示生成的字符串包含3个中文字符，@image 表示随机生成一个图片。在下方Body中可以看到发送本地mock请求后的结果。按照上述的mock规则生成了模拟数据。所以关于mock规则只要在数据模型中定义，引用到该模型的地方在本地mock请求中都会生效。

下面我们再来看下实际请求：

复制该链接到浏览器，每次刷新或者更改最后面的参数都会mock不一样的结果。

可以看到，链接的前缀就是本地Mock中的服务。

所有的接口都可以通过路径拼接在浏览器上访问，那么，思路打开~原本我们前端在运行项目的时候，将请求服务器的地址改为Apifox本地Mock中的服务链接，是不是就直接使用的是Apifox中的mock数据呢？

换句话，如果你的项目中有 .env.dev 或者 .env.test 文件，那么也可以按照这些文件里面的写法增加一个 .env.mock 文件。

配置好了文件，执行mock环境后，发现接口并没有按照我们预期的来。举个实际的例子，当我们在原有的完整项目上新增功能，到达开发页面前需要按照预期的数据来执行，例如指定的状态位，所以Apifox有个功能需要重点关注下，非常好用就是Mock期望，这个名字取得也很到位，就是你期望的mock数据在这里设置。

默认的案例中添加了Mock期望示例，可以设置前置条件，来决定你期望出现的结果。如果没有设置条件，那么默认就会按照添加的期望数据去展示。在返回数据中，可以继续使用mockjs的语法来mock数据，或者直接复核真实接口该返回的数据。通过此思路，在本地Mock里面复现生产环境是不是很easy，而且不污染非生产环境的数据。

关于接口Mock这块可以直接从官网看Mock 功能简介,一些注意事项都写的很详细。

注意上述代理方法使用本地mock的时候，不要在Apifox出现两个一模一样的接口，调用到了的时候会出错，因为每个接口都是唯一的路径，不唯一的时候，就需要做区分。

5.API自动化测试

关于自动化测试，八青妹在自己的专栏《八青妹的Cypress认知》中介绍了Cypress的用处和用法，然而，Cypress对于测试和后端来说，是有些许技术壁垒存在的，Apifox是一款无论是前后端还是测试都能快速上手的用来做接口自动化测试的工具。写一个自动化测试用例，项目中的所有人都能执行，会不会成就感更能给到位呢？

我们在开发过程中，常常需要一些新的数据，是一些已创建已编辑修改过，甚至是状态流转过，但又不是已完成的状态的数据，总不能需要一个数据，就让后端开发工程师在数据库中塞一个这种数据，即使塞了，这种数据也是不完整的，在某种角度说是割裂的，俗称脏数据💀。

这种常用的数据，我们可以编写自动化测试案例，在执行的过程中，也能检测下这些接口是否被影响到了。Apifox官方给出的案例我们可以看下：

这是一套测试从新建到修改到删除的流程，是一个完整的增查改删的过程。可以说是接口测试必不可少的环节，所以这个案例很具有代表性。

点击添加步骤，可以选择从接口导入或者接口用例导入步骤，也就是界面上点点，一看就会的操作，找到需要添加的接口，添加进来，也可以增加分组等其他循环或者判断的条件，都是很实用，八青妹的项目中几乎都用到了。

这里，讲一个八青妹在写自动化测试案例的时候，觉得需要给团队培训的概念。就是脚本，分为前置脚本、后置脚本和公共脚本。官网是这样介绍脚本：

1. 使用后置脚本功能测试（断言）请求返回结果的正确性。
2. 使用前置脚本动态修改接口请求参数，如增加接口签名参数等。
3. 使用脚本操作变量并在接口请求之间传递数据。
4. 脚本可以直接 调用其他语言编写的程序，支持java(.jar)、python、php、js、BeanShell、go、shell、ruby、Lua 等语言编写的外部程序。

脚本语法postman里面就有，但是鲜有人知更是少有人用！很多做测试的都不知道怎么在这里写断言、写前置条件等。 举个例子，我们在h5中做登录的时候，通常需要先输入手机号，发送验证码，再输入验证码、点击登录按钮。那么这里会涉及到两个接口，一个是发送验证码的接口[/login/getCode]，一个是登录的接口[/login/verifyCode]。可以理解为，登录的接口的前提条件是调用了发送验证码的接口。

//获取环境服务
let prefixUrl = pm.environment.get('BASE_URL');
//请求头参数，从环境变量中获取
let version = pm.environment.get("interface_version");
let customerPhone = pm.environment.get("customer_phone");
const echoPostRequest = {
    url: prefixUrl + "/login/getCode",
    method: "POST",
    header: {
        "Content-Type": "application/json",
        "interface-version": version
    },
    body: {
        mode: 'raw',
        raw: { "mobileNo": `${customerPhone}` },
    }
}
//发送请求
pm.sendRequest(echoPostRequest, function (err, res) {
    console.log(err ? err : res.json());
});

添加完成之后，在请求登录接口[/login/verifyCode]之前，会发送验证码接口[/login/getCode]。

关于后置操作，也是可以去编写脚本的，当然也可以直接去断言返回的参数是否是期望的。断言结果，会在运行后展示出来。

6. 总结

如官网所说，Apifox 是集 API 文档、API 调试、API Mock、API 自动化测试多项实用功能为一体的 API 管理平台。这个管理平台怎么用，如何吸引大家用好这个工具，这个就因人而异、因项目而异了。说实话，我已经卸载了postman，专注于Apifox啦，支持国产品牌，哈哈哈。

对了，忘记说，有个弊端是，断网了就用不起Apifox啦！