针对Jquery AJax的包封

一个项目最重要的就是数据交互,前端数据交互大多是利用ajax请求网络数据。为什么要包装ajax请求.

以下几个点.

一、建立统一返回数据格式。(在网站统一的返回数据格式,是建立容错处理机制的第一步)

二、建立统一容错处理机制(请求权限,超时,后台业务错误,服务器出错等等)

三、维护性高。

四、可基于网络请求,显示网络正在处理中,正在提交中。多种用于界面交互的功能。这个看自己业务需要不

调用方式:

配置接口

getRequest('配置接口名').done().fail()

getRequest('配置接口名').then(成功,失败)

        // 网络请求
       
           var globalConfigs = window.sysGlobalConfig,
        serverConfig = globalConfigs.serverConfig,
        config = {
            'local': {
                'dealconsumeList': 'data/dealconsumeList.js'
                'TransactionRecord': 'data/TransactionRecord.js',
            },
            'dev': {
                'logout':"out",// 退出接口
                'login': "login", // 登录接口

               
            }
        };
    function getEnvUrl(env,name)
    {
        var configUrl = config[env][name];
        return configUrl && serverConfig[env] + configUrl;
    }
    config.getUrl = function (name) {
        var url = getEnvUrl('dev', name) || getEnvUrl('local', name);
         if (!url)
         {
            throw "config  not found " + name;
         }
        return url;
    }
    module.exports = config;
       
        function (module, exports, __require__) {
            var configs = require('config'), responseStatus, ui = __require__(4).ui, noop = $.noop, globalAjaxSetting = {
                inShowLoading: false,
                isAutoCloseLoading: true,
                isShowLoading: false
            };

            responseStatus = {
                'ok': "000",// 成功
                'customerError': "001", // 后台自定义错误
                'requestError': "999" // 请求错误

            };
            $.ajaxSetup({
                type: "GET",
                dataType: "json",
                global: true,
                beforeSend: function () {
                },
                error: function (e) {
                },
                complete: function () {

                }
            });
            $(document).ajaxStart(function (e) {
                if (globalAjaxSetting.inShowLoading) {
                    globalAjaxSetting.isShowLoading = true;
                    ui.showLoading();
                }
            });
            $(document).ajaxSend(function (evt, request, settings) {
            });
            $(document).ajaxComplete(function (evt, request, settings) {
            });
            $(document).ajaxStop(function () {
                if (globalAjaxSetting.isShowLoading && globalAjaxSetting.isAutoCloseLoading) {
                    globalAjaxSetting.isShowLoading = false;
                    ui.hideLoading();
                }
            });
            function wrapReuqest(options) {
                var fialCallback = noop, successCallback = noop;
                function wrapSuccess(callback) {
                    successCallback = _.isFunction(callback) ? callback : noop;
                    return options.isWrapAjax ? function (d) {
                        var retStatus = d.retStatus, retMsg = d.retMsg || "访问服务器出错";
                        if (retStatus == responseStatus.ok) {
                            return successCallback.call(this, d.retBody, d);
                        } else {
                            !options.isCustomerError && ui.alert(retMsg);
                            return fialCallback.call(this, retStatus, d);
                        }
                    } : successCallback;
                }
                function wrapFail(callback) {
                    fialCallback = _.isFunction(callback) ? callback : noop;
                    return function (e, errortext) {
                        if (e.status == "timeout") {
                            ui.alert('网络请求超时');
                        } else if (errortext == 'parsererror') {
                            ui.alert('系统出错了');
                        }
                        return fialCallback.call(this, responseStatus.requestError, e, errortext);
                    }
                }
                function retryRequest() {
                    sendRequest(options);
                }
                function sendRequest(options) {
                    var ajax = $.ajax(options), then = ajax.then, done = ajax.done, fail = ajax.fail;
                    return _.extend(ajax, {
                        then: function (scb, ecb) {
                            var success = wrapSuccess(scb), dthen;
                            dthen = then(function () {
                                var result = success.apply(this, arguments);
                                if (_.isPlainObject(result) && result.promise) {
                                    result.done(wrapSuccess(function () {
                                        dthen.resolveWith(this, arguments);
                                    })).fail(wrapFail(function () {
                                        dthen.rejectWith(this, arguments)
                                    }));
                                }
                            }, wrapFail(ecb));
                            return dthen;
                        },
                        done: function (cb) {
                            done(wrapSuccess(cb));
                            return ajax;
                        },
                        fail: function (cb) {
                            fail(wrapFail(cb));
                            return ajax;
                        }
                    });
                }
                options.data = options.data || {};
                if (!_.has(options.data, "caseId")) {
                    options.data.caseId = Masa.business.getCaseId();
                }
                options.isCustomerError = _.has(options, 'isCustomerError') ? options.isCustomerError : false;
                options.isWrapAjax = _.has(options, 'isWrapAjax') ? options.isWrapAjax : true;
                globalAjaxSetting.inShowLoading = options.inShowLoading = _.has(options, 'inShowLoading') ? options.inShowLoading : true;
                globalAjaxSetting.isAutoCloseLoading = options.isAutoCloseLoading = _.has(options, 'isAutoCloseLoading') ? options.isAutoCloseLoading : true;
                return sendRequest(_.omit(options, ['isCustomerError', 'inShowLoading', 'isAutoCloseLoading', 'isWrapAjax']));
            }
            function request(name, options) {
                options = options || {};
                if (name != "*") {
                    options.url = configs.getUrl(name);
                }
                return wrapReuqest(options);
            }
            function postRequest(name, options) {
                options = options || {};
                options.type = "post";
                return request(name, options);
            }
            function getRequest(name, options) {
                options = options || {};
                options.type = "get";
                return request(name, options);
            }
            module.exports = {
                request: request,
                getRequest: getRequest,
                postRequest: postRequest
            };
        }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值