【前端小技巧】如何使用 Eolink Apilkit 调用 Mock

在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。

这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。

Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。

<br>

如何 Mock?

项目地址:https://www.eolink.com/apikit <br>

简易Mock

简易Mock功能可在编写API文档的时候,同时对不同的返回结果进行Mock配置。并且可预置智能Mock规则,在编写返回参数时,若参数名和字段类型匹配智能Mock规则时,系统自动填入该参数的Mock规则。

配置简易Mock后,API文档会自动生成Mock URL,用户可复制该URL直接调用得出想要的数据结果。

1、添加简易Mock
  1. 进入API文档编辑页,选中需要编辑的返回结果
  2. 数据类型选择JSON 或 XML ,在参数列表中填写字段名和选择数据类型,若字段名和数据类型命中了智能Mock的规则,则字段名输入框失去焦点后,系统会自动填充该字段的Mock值。

若mock值已有内容,则变更字段名或数据类型均不会触发智能Mock。

1

  1. 无论是否命中智能Mock规则,均可点击mock输入框,填写所需的mock规则。mock输入框支持填写数值和mockjs占位符。

若填写数值,则调用简易Mock的时候固定返回该数值;

若填写mockjs占位符,系统会根据占位符的输入内容实时展示您可能想输入的值。您点击下拉选项中的可能值后,该值会快速填入mock输入框中。

2

  1. 点击保存API文档,所添加的简易Mock即可被调用。 <br>
2、调用简易 Mock

进入API文档展示页,下拉至返回参数模块,则可见不同的返回结果下会有对应的简易Mock 链接。

点击 简易Mock 链接最右侧的复制按钮,即可复制到剪贴板,在代码中直接对该地址发起请求即可得到对应结果的虚拟数据。

3

<br>

高级Mock

Eolink Apikit 强大的自定义请求校验与响应,便于前后端对接和集成测试等场景如果自动生成的 Mock API 无法满足需求,Apikit 还提供了高级 Mock,设置某些请求参数作为触发条件并返回对应的结果,让 Mock API 有了更广泛的使用场景,比如更真实地模拟后端来完成集成测试。

1、添加高级Mock

在“高级Mock”页下,点击“添加Mock”,即会有添加Mock信息弹窗。可填写触发该高级Mock的请求参数,及该高级Mock返回参数信息。高级Mock仅会根据配置请求参数,完全匹配时才会返回所配置的返回参数。

4

2、调用高级Mock

用户点击高级Mock列表页顶部的调用地址,即可复制地址。可把地址黏贴到IDE工具中,调用接口进行调试。

5

一个API文档中无论设置了多少条高级Mock,均仅有一个高级Mock调用地址。用户在调用时,根据请求的内容判断触发了哪一条的高级Mock设置,并返回对应高级Mock的返回结果。 <br>

“如何优雅地Mock数据”是每个前端都应该学会的技巧,在后端数据没有出来的情况下,还能获取到和后端约定数据结构一样的模拟数据的一门技术,以避免后端接口进度滞后影响我们正常的开发 ,提高开发效率。

Eolink Apikit 提供市面最强的 Mock API 能力体系, mock 功能完善,从一个整体 Mock 到一个字段级的 Mock ,适配各种场景,大部分人会将其用于每天的应用,例如前后端项目开发,第三方接口的调试,以及接口的自动化测试,几个小时就能熟练地运用,学习成本低,不需要额外编写代码。

6

点赞
收藏

评论区

加载中...

相关推荐

聊聊前后端接口对接的那些事

前言在现在的前后端分离的项目开发中,为了不影响项目的进度,都是前后端同时进行开发。为了不影响咱们前端开发的进度,通常都是由后端同学,先提供接口文档,然后前端同学对照这接口文档来进行数据的模拟来完成前后端对接的工作。这里的数据模拟其实也就是大家平时所说的mock数据,那么前端当中有哪些方式来实现mock数据呢???…(⊙_⊙;)…咱们接着往下聊!(●^o^●)

高效进行接口测试,简单易懂!

前言日常测试过程中,常常需要多种工具来接力完成自己的接口测试任务。比如说,使用swagger查看接口文档,使用mock编造接口数据对前端页面做测试使用postman测试后端接口,用Jmeter来做接口自动化测试/性能测试。那有没有一款软件可以完美集成以上所有的功能?笔者发现一款叫Apifox的软件,一款完成能完成以上几乎所有软件的功能。官方给出Apifox(

接口测试工具简介!

一、Apifox的介绍1、目前接口测试的现状2、常用方案3、存在问题开发人员在Swagger定义好文档后,接口调试的时候还需要去Postman再定义一遍。前端开发Mock数据的时候又要去mockjs定义一遍,还需要手动设置Mock规则。测试人员需要去JMeter再定义一遍。前端根据mockjsMock出来的数据开发完,后

程序员的摸鱼加速器!

最近趁摸鱼时间体验了一款神器,堪称后端前端们的摸鱼加速器,测试们的寿命催化剂。那就是:Apifox。中国自主研发的集文档、接口调试、Mock、接口自动化测试一体的协作平台。一套系统、一份数据,可解决多个系统之间的数据同步问题。定义好接口文档,则接口调试、数据Mock、接口测试就可以直接使用,无需再次定义;接口文档和接口开发调试也可以同一个工具,接口调试完成后

满足你对 Api 的所有幻想

一、Api管理的难点在哪?相信无论是前端,还是后端的测试和开发人员,都遇到过这样的困难。不同工具之间数据一致性非常困难、低效。多个系统之间数据不一致,导致协作低效、频繁出问题,开发测试人员痛苦不堪。1.开发人员在Swagger定义好文档后,接口调试的时候还需要去Postman再定义一遍。2.前端开发Mock数据的时候又要去mo

国投证券如何引领金融行业的 API 治理创新?

在开发、对接阶段,因为API资产统一托管在平台上,因此可以通过API文档快速生成MockAPI,前端开发人员只需要通过MockAPI就可以快速对接后端接口,将前后端开发工作解耦,提高工作效率。在测试阶段,测试人员可以基于API文档快速创建单元测试用例,API文档和测试用例之间自动形成绑定关系。当API发生变更的时候,平台可以将数据同步到测试用例,并且可以与CI/CD流程结合,实现单元测试用例的自动化回归测试工作,并且将测试报告推送给相应邮箱。