引言
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。如对接口请求返回状态码404500统一处理。
例子如下，使用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;
});
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/222000.html
