在线Mock服务VirAPI在各前端场景的使用介绍

发布在VirAPI官网

VirAPI简介

VirAPI是提供在线Mock虚拟数据的平台,在没有后端程序提供数据接口时,实现你前端ajax获取虚拟数据演示项目的效果。在项目初期后端接口未准备好,或纯粹是想实现前端使用虚拟数据模拟演示项目,都是极好的选择。在线调用,无需还在本地项目中写一堆mock代码或其他实际生产环境不需要的东西。

VirAPI还提供GETPOSTDELETEPUT多种网络请求方式,且还支持自定义请求参数合法性验证,响应数据自定义数据格式。为了方便快速上手,无需学习成本,还提供了小白式可视化创建虚拟接口的功能,同时为了灵活性也提供MockJS代码方式创建虚拟响应数据。

VirAPI怎么用?

首先登陆VirAPI控制台页面,创建自己的应用及虚拟接口,此步骤可参考《新手入门-创建应用》《新手入门-创建接口》《新手入门-接口使用》

创建应用及接口后,即可获得以下两个开发参数:


接下来以 GET请求 且采用 请求头部Token验证 方式为例,详细介绍在常见的前端项目中的使用方式:

1. 原生JS ajax请求

在原生Javascript中请求VirAPI虚拟数据接口示例:

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'http://api.virapi.com/user_id/myapp/test_api', true);  // 指定请求方式&请求地址
xmlHttp.setRequestHeader("Content-type", "application/json;charset=utf-8");
xmlHttp.setRequestHeader("App-Token", "my_app_token_123456");   // 设置对应虚拟接口应用请求Token
xmlHttp.send(null);
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var res = JSON.parse(xmlHttp.responseText);
        if(res.code == 200){
            // 接口响应:正确成功请求,若有定义响应data数据,即为:res.data
        }else{
            // 接口响应:失败非法请求
            console.log(err)
        }
    }
};

2. JQuery网络请求

在JQuery项目中使用ajax请求VirAPI虚拟数据接口示例:

$.ajax({
    type: "GET",    // 指定请求方式
    headers: {
        "Content-Type": "application/json;charset=utf-8",
        "App-Token": "my_app_token_123456"   // 设置对应虚拟接口应用请求Token
    },
    url: "http://api.virapi.com/user_id/myapp/test_api",  // 指定请求虚拟接口地址
    success: function(res) {
        if(res.code == 200){
            // 接口响应:正确成功请求,若有定义响应data数据,即为:res.data
        }else{
            // 接口响应:失败非法请求
        }
    },
    error: function(e){
        // 网络或服务错误
    }
});

3. Vue axios网络请求

在VueJs项目中使用axios请求VirAPI虚拟数据接口示例:

axios({
    method: "GET",    // 指定请求方式
    url: "http://api.virapi.com/user_id/myapp/test_api",  // 指定请求虚拟接口地址
    headers: {
        "Content-Type": "application/json;charset=utf-8",
        "App-Token": "my_app_token_123456"   // 设置对应虚拟接口应用请求Token
    }
}).then(function (response) {
    var res_data = response.data;
    if(res_data.code == 200){
        // 接口响应:正确成功请求,若有定义响应data数据,即为:res_data.data
    }else{
        // 接口响应:失败非法请求
    }
}).catch(function (error) {
    // 网络或服务错误
    console.log(error);
});

4. Angular HttpClient网络请求

在Angular中使用HttpClient请求VirAPI虚拟数据接口示例:

http.get(    // 指定GET请求方式
    "http://api.virapi.com/user_id/myapp/test_api",  // 指定请求虚拟接口地址
    {
        headers: {
            "Content-Type": "application/json;charset=utf-8",
            "App-Token": "my_app_token_123456"   // 设置对应虚拟接口应用请求Token
        }
    }
).subscribe((res:Response) => {
    if(res.code == 200){
        // 接口响应:正确成功请求,若有定义响应data数据,即为:res.data
    }else{
        // 接口响应:失败非法请求
    }
});

5. 小程序网络请求

在微信小程序中调用VirAPI虚拟数据接口示例:

wx.request({
    method: "GET",    // 指定请求方式
    url: "http://api.virapi.com/user_id/myapp/test_api",  // 指定请求虚拟接口地址
    header: {
        "Content-Type": "application/json;charset=utf-8",
        "App-Token": "my_app_token_123456"   // 设置对应虚拟接口应用请求Token
    },
    success(res) {
        var res_data = res.data;
        if(res_data.code == 200){
            // 接口响应:正确成功请求,若有定义响应data数据,即为:res_data.data
        }else{
            // 接口响应:失败非法请求
        }
    },
    fail(err){
        // 网络或服务错误
        console.log(err)
    }
});

6. Linux curl 网络请求

通过CURL请求VirAPI虚拟数据接口示例:

curl -H 'Content-Type:application/json;charset=utf-8' -H 'App-Token:my_app_token_123456' 'http://api.virapi.com/user_id/myapp/test_api'


以上即是VirAPI在各种前端场景下的使用方法,是不是很简单!!!当要切换为自己的后端接口服务时只需替换请求地址URL即可,真正不污染你的项目代码。