前端模拟ajax接口

前端GoGoGo

发布于 2018-08-27 10:13:45

1.1K0

发布于 2018-08-27 10:13:45

文章被收录于专栏：九彩拼盘的叨叨叨九彩拼盘的叨叨叨

在平常开发中，了解完需求后，前端和后端会确定页面的需要的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
        };
    }
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015.06.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax