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

原创
2020/11/17 12:46
阅读数 33

VirAPI简介

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

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

VirAPI怎么用?

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

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

  • 虚拟接口请求地址 (此处为了下面的讲解假定为:http://api.virapi.com/user_id/myapp/test_api)
  • 虚拟接口应用Token (此处为了下面的讲解假定为:my_app_token_123456)

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

1. 原生JS ajax请求

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");
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网络请求

$.ajax({
    type: "GET",
    headers: {
        "Content-Type": "application/json;charset=utf-8",
        "App-Token": "my_app_token_123456"
    },
    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网络请求

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"
    }
}).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网络请求

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

5. 小程序网络请求

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"
    },
    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 -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在各种前端场景下的使用方法,是不是很简单!!!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部