封装Ajax

介绍：基于jquery的ajax封装

首先把常量Url提取出来,这里可以多存几个备用（比如测试环境和正式环境），到时候切换环境，直接打开注释，切换一下就ok了

<script>



    const Url = 'http://xxx.xxx.xxx.xxx:8080/xxx/';
    const Url = 'http://yyy.yyy.yyy.yyy:8080/yyy/';

    核心代码如下

    function Ajax(data) {
        var def = $.Deferred();
        var canceled = false;
        if (data.type == 'get') {
            var jqXHR = $.ajax({
                type: "get",
                url: Url + data.url,
                data: {},
                xhrFields: {withCredentials: true},
                crossDomain: true,
                contentType: "application/json",
                datatype: "json",
                error: function (xhr, status, error) {
                    if (canceled) return;
                    var data = {
                        result: 4,
                        message: error,
                        status: status
                    };
                    console.error("调用接口:[" + this.url + "]报错;状态码:[" + xhr.status + "];错误信息:[" + error + "]");
                    def.reject(data);
                },
                success: function (data) {
                    if (canceled) return;
                    def.resolve(data);
                }
            });
            var promise = def.promise();
            var then = promise.then;
            var thenWrapper = function () {
                var promise = then.apply(this, arguments);
                promise.cancel = function () {
                    canceled = true;
                    jqXHR.abort();
                };
                promise.then = thenWrapper;
                return promise;
            };
            promise.then = thenWrapper;
            return promise;
        } else if (data.type == 'post') {
            var saveData = JSON.stringify(data.data);
            var jqXHR = $.ajax({
                type: "post",
                url: Url + data.url,
                data: saveData,
                xhrFields: {withCredentials: true},
                crossDomain: true,
                contentType: "application/json",
                datatype: "json",
                error: function (xhr, status, error) {
                    if (canceled) return;
                    var data = {
                        result: 4,
                        message: error,
                        status: status
                    };
                    console.error("调用接口:[" + this.url + "]报错;状态码:[" + xhr.status + "];错误信息:[" + error + "]");
                    def.reject(data);
                },
                success: function (data) {
                    if (canceled) return;
                    def.resolve(data);
                }
            });
            var promise = def.promise();
            var then = promise.then;
            var thenWrapper = function () {
                var promise = then.apply(this, arguments);
                promise.cancel = function () {
                    canceled = true;
                    jqXHR.abort();
                };
                promise.then = thenWrapper;
                return promise;
            };
            promise.then = thenWrapper;
            return promise;
        }
    }

    get请求

    var data = {
            '参数1'： '值1',
            '参数2'： '值2',
            '参数3'： '值3'
    }
    Ajax({
        type: 'get',
        url: 'xxx/xxx/xxx?' + qs(data)
    }).then(function(res){
        console.log(res);
        //...
    })
    //URL拼接字符串
    function qs(data) {
        var str = '';
        for (var k in data) {
            if (!data[k]) {
                data[k] = '';
            }
            str += k + '=' + data[k] + '&';
        }
        return str.slice(0, -1)
    }

    post请求

    var data = {
        type: 'post',
        url: 'xxx/xxx/xxx',
        data: {
            '参数1'： '值1',
            '参数2'： '值2',
            '参数3'： '值3'
    }
    }
    Ajax(data).then(function(res){
        console.log(res);
        //...
    })
</script>