前端工程化中对接口请求工具的封装

引言

web项目对后台服务的请求一般使用jQuery.ajax axios等开源工具。在实际业务场景中需要对部分参数隐藏和统一处理。这就需要对开源工具类进行封装，并提供接口给其他方法调用，使得前端开发过程中不对源码修改就可以实现一部分业务、接口请求过程中的优化。

封装技巧

• 对ajax请求过程增加遮罩层提示和关闭。使用全局变量loadingnum 计算实现开始和结束。loadingnum=0计算接口发起请求此时进行自增。在回调函数 jQuery.ajax.success 和 jQuery.ajax.error 进行递减。当loadingnum重新为0关闭遮罩层。

• 简化请求参数，对不同业务请求头进行封装并提供接口，如：ajaxUtil.postJson 对 jQuery.ajax 参数写死为 “post”, “json”，“application/json”。

• 统一参数处理和优化。如接口请求超时间 timeout:60000。如对接口请求返回状态码 404 500 统一处理。

例子如下，使用requre.js定义模块：

define( {
    var ajaxUtil = {};
    var loadingnum = 0;
    /**
     * ajax postJson 封装
     * url 请求链接
     * fn 回调函数，返回调用结果
     * indata 入参
     * aysnc 同步 false 异步 false
    */
    ajaxUtil.postJson = function(url, fn, indata, async) {
        indata = { ROOT: { BODY: indata } };
        if (++loadingnum == 1) {
            //增加遮罩层提示 开始
        }

        ajaxUtil.base(
            url,
            "post",
            "json",
            function(resdata) {
                if (--loadingnum == 0) {
                    //增加遮罩层提示 结束
                }

                //统一异常处理
                if (data && data.retCode == "0001") {
                    //统一参数处理和优化。  进行错误提示
                } else {
                    fn(data);
                }
            },
            JSON.stringify(indata),
            async,
            "application/json"
        );
    };

    // ajax 基础封装
    ajaxUtil.base = function(url, method, type, fn, data, async, contentType) {
        var uri = new Uri(url);

        $.ajax({
            url: uri.toString(),
            type: method,
            async: async,
            contentType: contentType,
            cache: false,
            dataType: type,
            data: data,
            timeout: 60000,
            success: function(retdata) {
                fn(retdata);
            },
            error: function(XMLHttpRequestP, textStatusP, errorThrownP) {
                var data = {
                    result: XMLHttpRequestP,
                    retCode: "0001",
                    retMsg: "ajax调用失败"
                };
                fn(data);
            }
        });
    };
    return ajaxUtil;
});