美文网首页
前端接口兼容工具

前端接口兼容工具

作者: BraisedCakes | 来源:发表于2017-06-17 10:16 被阅读0次

    众所周知,前端不能完全信任后端的, 我们经常会做一些特殊处理来兼容可能出现的异常情况, 比如

    //接口返回

    rs = {
        data : {
            list : [{name : '用户名'}]
        }
    }

    //前端在渲染列表的时候,往往要进行多次兼容, 就像下面那样

    rs && rs.data && rs.data.list && rs.data.list.forEach(function(item, index)
        $('body').append('<div>' + item.name + '</div>');
    });

    如果某个地方, 忘了做处理, 并且后端返回的接口和我们约定的格式不同,就可能导致页面报错,为了解决该问题, 接口兼容工具应运而生。

    我们只要在前端写好一套默认的接口模版, 工具会自动修正接口,并将不满足要求的地方, 转成你设定的默认值。

    比如 :

    //默认接口模版
    var default = {
        count : 0,
        data : {
            list : [{
                name : '默认用户名'
            }]
        }
    }
    //接口返回
    rs = {
        msg : '获取成功'
        count : 99,
        data : {
            list : [{
                name : '小明'
            },{
                name : ''
            },{
                 age : 18
            }]
        }
    }
    //通过工具兼容后的结果
    rs = interfaceRepair(default, rs);
    {
        count : 99,
        data : {
            list : [{
                 name : '小明'
            },{
                 name : '默认用户名'
            },{
                 name : '默认用户名'
            }]
        }
    }

    这样, 是不是就能解决你的问题了呢,我们再也不用担心因为接口原因导致页面报错啦

    更多详情, 请在github查看哦,  github地址

    相关文章

      网友评论

          本文标题:前端接口兼容工具

          本文链接:https://www.haomeiwen.com/subject/kkvzvttx.html