ajax请求实用的封装方法

个人身为一个java后端开发，对js的闭包简单理解为跨方法访问变量值，放到java里就是方法A能使用方法B中的变量。

今天写代码时看到公司之前同事写的ajax到处都是，没有任何封装，需要优化一下。

 

项目中的ajax到处都是这类代码：

重复多，占空间，可读性差

$.ajax({
        type: 'get',
        url: BASE_PATH + '/manage/s01/list?offset=0&limit=1000',
        success: function (result) {
            s01List=result.data.rows;
            create.s01List=groupListMap(s01List,"s03",1,"s04");
            create.s01ListBack=clone(create.s01List);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });

 

统一封装一下： 

放到common.js文件中，通过传参直接调用，需要前后端协调一致，无法解决异步问题。

 

 

function getHttp(url, fun) {
    $.ajax({
        type: 'get',
        url: BASE_PATH + url,
        success: function (result) {
            //...
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}

function postHttp(url, data) {
    $.ajax({
        type: 'post',
        url: BASE_PATH + url,
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function (result) {
            if (result.state == 200) {
                //...
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
        }
    });
}

解决异步问题：

利用js的闭包特点，直接写一个函数去接受异步结果，这样就极大加强了灵活性。

function initFuntion(result) {
    s01List=result.data.rows;
    create.s01List=groupListMap(s01List,"s03",1,"s04");
    create.s01ListBack=clone(create.s01List);
    console.log(create.s01ListBack);
}


getHttp(BASE_PATH + '/manage/s01/list?offset=0&limit=1000',initFuntion)

 

对于一些ajax进行全局设置：

这个在一些需要前后分离的项目中比较实用，每个请求都需要带上token信息，并且一些error函数也非常使用

var token = localStorage.getItem("token");

$.ajaxSetup({
	dataType: "json",
	cache: false,
    headers: {
        "token": token
    },
    xhrFields: {
	    withCredentials: true
    },
    complete: function(xhr) {
        //token过期，则跳转到登录页面
        if(xhr.responseJSON.code == 401){
            parent.location.href = baseURL + 'login.html';
        }
    }，
    error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg(textStatus);
    }
});

如果用axios更好，axios封装起来更简单方便

这里不进行粘贴了，axios使用更加方便

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

 

今天用java8的拉姆达表达式突然发现forEach和这个js闭包有点像，突然喜欢了这种写法，function里的方法结合future很舒服