前端开发同学，VirAPI你应该了解一下！

于2020-07-12发布在segmentfault

VirAPI -- 非侵入式虚拟数据在线请求响应生成接口，支持MockJs语法，请求即可得自定义规则的响应数据。

恭喜你发现了这么一款好的工具 -- VirAPI，具体VirAPI是干嘛的？有什么用？这里简单介绍一下它创建的初衷，以及它可以在你的开发过程中为你带来哪些便利与功能。

VirAPI官网截图

从MockJS谈起

如果你是前端开发人员或测试人员，应该对MockJS有所耳闻，甚至在实际开发工作中有接触使用到它。MockJS是一款功能强大的虚拟随机数据生成及模拟Ajax请求的框架。官方为其给出了六大特点：

前后端分离
开发无侵入
数据类型丰富
增加单元测试的真实性
用法简单
方便扩展

确实很是美好，但在使用过程中其中有一环节在我看来并不友好，说是“开发无侵入”，但在使用时需要引入MockJS包，然后还要在项目中通过Mock.mock定义模拟的响应数据结构，再借助拦截Ajax请求的机制来实现整个响应请求生成虚拟数据的过程。单独这一点在我看来就不够优雅友好，现实开发过程中引入生产环境不需要的Js包，定义本地测试才需要的JS代码，都是一种侵入式的污染，对我这种有代码洁癖，及考虑线上线下正式环境与本地开发环境一致性的开发者来说，确实有些顾虑。

// 引入mockjs
import Mock from 'mockjs'

const url = '/custom_request_url_01';

// 使用mockjs定义模拟响应数据
Mock.mock(url, {
    "code": 0,
    "data": {
        "mtime": "@datetime",   //随机生成日期时间
        "score|1-800": 800, //随机生成1-800的数字
        "rank|1-100": 100, //随机生成1-100的数字
        "stars|1-5": 5, //随机生成1-5的数字
        "nickname": "@cname",   //随机生成中文名字
    }
});

// 这里省略部分逻辑...

// 真正需要的逻辑：拦截网络请求返回随机虚拟响应数据
axios.get(url).then(res => {
    // 这里即可获得 Mock 随机虚拟数据
    // res.data = {code:0, data:{...}}
})
.catch(error => {
    // ...
});

为此，VirAPI应运而生，它站在MockJS的肩膀之上，采用 “云定义” “云引用”的方式，达到完全 “零入侵” “零污染”。那么VirAPI是怎么做到的呢？

我们先来想想真实开发过程是怎样的，是不是后端开发同学准备好前端所需的开发接口，然后前端同学通过请求一个URL，按照接口的要求和规范（携带什么参数、使用什么请求方式等等），去请求这个接口URL，然后服务端接口对请求进行必要的验证（参数是否正确是否合法等），再返回对应的响应结果或响应数据？

这才是真实开发过程中真实的模样和流程。而VirAPI正是尊重并遵循这个既定事实，将MockJS打造成为一个提供接口URL，验证请求数据，响应返回模拟数据的更加合理的场景化的在线虚拟数据云接口平台。

VirAPI的使用介绍

1. 三步快速创建在线云虚拟数据接口

1.1 创建应用

就像实际项目开发，都是针对一个个项目应用进行开发，而其具体的接口都是在这个项目应用下创建的。VirAPI的虚拟接口也是通过项目应用来区分管理的。

创建应用示图

1.2 创建虚拟接口

创建一个项目应用后，然后再在该项目下创建接口。目前支持创建POST,GET,PUT,DELETE四种请求类型虚拟接口；支持自定义请求路由(包括动态路由)、请求参数、请求数据合法性验证规则，及预期请求响应返回数据结构。

创建接口.png

其中接口响应数据即为MockJs的Mock.mock方法中定义的虚拟响应数据结构；熟悉MockJS语法的同学能快速适应上手，定义出或复杂或丰富的想要的响应数据。

若是对MockJS语法不是很了解的也不需要担心，其语法很是简单，基本就是JSON的结构，只不过提供了丰富的方法(方法用 @ 引出，且还可以为方法传参进行调整)。具体MockJS支持的方法及参数可见http://mockjs.com/examples.html；而且几乎对着该文档说明就能马上上手。

1.3 请求接口URL获取虚拟数据

获取应用对应的Token，提交请求参数给虚拟接口URL，即可获取目标虚拟响应数据。就是这么简单！

请求接口URL获取虚拟数据示图

而且更为重要的是，在你的项目中你只需要在获取请求或发送请求的地方，将请求URL换为虚拟接口URL，即可在你的项目中使用了！若后端开发同学的接口URL命名规则一致，则在生产环境下只需替换一下接口的请求域名即可。几乎就不用再做任何的修改，以及删除不需要的代码或做生产环境的大的适配。

2. 更加丰富的功能支持

真实项目接口总会有对提交的数据进行验证，比如是否必须、数据类型、长度范围等。而VirAPI都给予了这些支持，在创建接口时，声明接收哪些数据参数，并对其可设置验证规则。若请求传递过来的数据不合符请求数据规则，即会得到请求失败的提示。如：

请求虚拟接口验证错误.png

当前VirAPI支持 String、Number、Boolean、Array、Object、Array/String、Array/Number、Array/Boolean、Array/Object 等多种数据类型；基本满足绝大部分的开发场景。

POST请求Body数据定义示例

此外，VirAPI还提供了接口文档，在线测试，以及接口请求日志及统计的功能，以帮助开发者更好的管理与分析自己的项目。

以上就是VirAPI https://www.virapi.com的简单介绍，感兴趣或有需要的同学可以去尝试一下。

VirAPI是借助了MockJS的核心功能进行的扩展，在此也感谢MockJS。当前VirAPI也还存在很多不足，衷心的欢迎各位小伙伴的批评与建议。

期待VirAPI能为你的日常开发过程带去一丝帮助。谢谢~