前端模拟ajax接口

在平常开发中,了解完需求后,前端和后端会确定页面的需要的ajax接口,及接口的细节(请求与响应的格式)。然后,前后端就可以各自开工~ (注:在本文的接口均指ajax接口。)

作为前端,为了能和后端同步开发,我们会对接口进行模拟。

模拟Get方式的接口,响应是固定格式的

可以用一个静态文件来模拟。 例如,我们要异步获取餐店列表,我们创建一个lists.json文件来模拟餐店列表

{
    data: [{
        "name": "XXX",
        "loc": "XXX",
        ...
    },...]
}

然后请求地址为该文件的地址

<div class="lists" data-url="path/to/lists.json"></div>
<script>
$.ajax({
  url: $('.lists').data('url')
}).done(function(data){
    
});
</script>

后端拿到页面后,只需替换data-url的值即可。

模拟响应是非固定格式的或非Get方式

有些时候,请求的参数或数据不同时,响应的结构会有不同。有时候请求方式为非Get的。用上面的方法就无能为力了。

这时候,我们可以借助插件jquery-mockjax。通过这个插件,定义了需要mock请求,并设置响应结果。当在后面对异步进行请求满足前面定义的请求时,其实并没有发请求,其获得的响应即为前面设置的响应结果。

下面的代码展示了,一样的请求地址,不同的请求数据返回不同的结构

<script src="path/to/jquery.mockjax.js"></script>
<script>
$.mockjax({
    url: "/data",
    data: {
        action: "foo1"
    },
    response: function(setting) {
        // 返回值
        this.responseText = {
            data1: 'text1'
        };
    }
});

$.mockjax({
    url: "/data",
    data: {
        action: "foo2"
    },
    response: function(setting) {
        // 返回值
        this.responseText = {
            data2: 'text2'
        };
    }
});

$.ajax({
    url:"/data",
    data: {
        action: "foo1"
    }
}).done(function (data) {
    console.log(data);// {data1: "text1"}
});

$.ajax({
    url:"/data",
    data: {
        action: "foo2"
    }
}).done(function (data) {
    console.log(data);// {data2: "text2"}
});
</script>

jquery-mockjax也支持模拟各种请求方式(Get,Post,Patch等等)的请求。

多个异步多个状态的模拟

有时候,异步处理函数是和多个异步结果相关的。而每个异步的状态是有限的。那么主要是列出所有需要模拟的状态的组合。通过修改当前状态来进行测试,下面是demo

// 所有状态组合
var states = {
    status1: {
        ajaxA: 'status1',
        ajaxB: 'status2',
    },
    status2: {
        ajaxA: 'status1',
        ajaxB: 'status2',
    },
    status3: {
        ajaxA: 'status2',
        ajaxB: 'status3',
    }
};

// 通过修改当前状态来进行测试
var currState = 'status1';
// var currState = 'status2';
// var currState = 'status3';

$.mockjax({
    url: 'ajaxA',
    type: 'get',
    response: function() {
        var result;
        switch (currState.status1) {
            case '1':
                result = false;
                break;
            case '2':
                result = {
                    data: 'temp'
                };
                break;
            default:

        }

        this.responseText = {
            data: result
        };
    }
});

$.mockjax({
    url: 'ajaxB',
    type: 'get',
    response: function() {
        var result;
        switch (currState.status2) {
            case '1':
                result = 't1';
                break;
            case '2':
                result = {
                    data: 'ts'
                };
                break;
            case '2':
                result = {
                    data: 'blabla'
                };
                break;
            default:

        }

        this.responseText = {
            data: result
        };
    }
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏magicsoar

版本控制-git的使用

大家好,我又回来了,上个礼拜因为熬夜看球感冒了,所以没有写新的文章出来。 这周给大家介绍下git的使用 我们为什么需要一个版本控制的软件呢? 我相信大家很多人在...

2388
来自专栏北京马哥教育

Linux下top命令详解

豌豆贴心提醒,本文阅读时间7分钟 ? top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器...

4215
来自专栏阮一峰的网络日志

Linux 的启动流程

半年前,我写了《计算机是如何启动的?》,探讨BIOS和主引导记录的作用。 那篇文章不涉及操作系统,只与主板的板载程序有关。今天,我想接着往下写,探讨操作系统接管...

3145
来自专栏androidBlog

Git 命令行教程及实例教程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

1191
来自专栏九彩拼盘的叨叨叨

nodejs概要

nodejs是由Ryan Dahl写的。他做nodejs的初衷是为了做一个高性能是web服务器。 为了实现高性能服务器,实现要点是:

2033
来自专栏性能与架构

Redis的Lua的功能扩展

Redis支持使用Lua脚步来进行功能扩展,这个能力给Redis带来了更多的应用场景,你可以编写若干命令组合,作为一个小型的非阻塞事务或者更新逻辑 使用脚本的...

3675
来自专栏python3

django组件--cookie与session

在一个会话的多个请求中共享数据,这就是会话跟踪技术。例如在一个会话中的请求如下: 请求银行主页; 

1865
来自专栏屈政斌的专栏

【腾讯云的1001种玩法】centos 7 部署 dotnetcore + Angular2 实践

本文主要讲述了使用腾讯云主机,在centos 7 部署 dotnetcore + Angular2 的实践过程,该项目目前只是用于学习 dotnetcore ...

2.6K1
来自专栏从零开始学自动化测试

python接口自动化17-响应时间与超时(timeout)

前言 requests发请求时,接口的响应时间,也是我们需要关注的一个点,如果响应时间太长,也是不合理的。 如果服务端没及时响应,也不能一直等着,可以设置一个t...

5426
来自专栏程序员互动联盟

【专业技术】linux启动流程剖析

半年前,我写了《计算机是如何启动的?》,探讨BIOS和主引导记录的作用。 那篇文章不涉及操作系统,只与主板的板载程序有关。今天,我想接着往下写,探讨操作系统接管...

3647

扫码关注云+社区

领取腾讯云代金券