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

前端接口兼容工具

作者: 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