个人身为一个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封装起来更简单方便
|
|
收藏
淘帖
踩
