MUI的ajax包装
admin 发布于：2017-09-07 21:48:41
阅读：loading
ajax的使用比较简单，以至于所有的请求提交都可能会使用到，但是它的参数中dataType、type属性等基本都是固定的；除了这些属性外一个请求的提交往往都附有等待中的响应效果，如果每个请求都这么写也太业余了；另外对一些后台响应的处理肯定也得有一个全局的包装，比如用户提交一个请求，后台响应未登录或者没有权限*作等，这些完全可以由公共处理拦截，而无需进入ajax的success中处理......
本文主要包装一下mui的ajax请求，下面说一下包装一下的特征：
1、不改变mui.ajax函数的实现，调用方式、参数等保持一致，调用简单；
2、dataType、type等属性默认为最常用的值，如需替换可覆盖；
3、添加平台自带的loading效果，如不需要可采用属性覆盖的方式取消；
4、全局处理部分操作的响应，如用户未登录、没有权限、出现错误等（需与后端集成）；
5、回调函数等覆盖默认实现，如success，error等；
如果你对jQuery的ajax比较熟悉，其实这里的实现就看起来比较简单，参考代码如下：
代码封装为mui.ajaxRequest
/**
* mui.ajaxRequest
* 封装mui.ajax请求，调用方式与一致
*/
(function($, doc) {
mui.extend({
ajaxRequest: function(url , options){
var defaults = commonDefaults(options);
var options = mui.extend(defaults, options);
options.beforeSend = defaults.onBeforeSend;
options.success = defaults.onSuccess;
options.error = defaults.onError;
mui.ajax(url , options);
}
});
function commonDefaults(options){
//默认参数定义
var defaults = {
dataType: "json",
type: "post",
timeout: 10000,
wait: true,
waitMessage: "努力奔跑中，等等我...",
onBeforeSend : function(xhr){
if(defaults.wait == true){
showLoading(defaults.waitMessage);
}
if(options.beforeSend){
options.beforeSend(xhr);
}
},
onSuccess : function(data){
if(defaults.wait == true) {
hideLoading();
}
//后台抛出Exception异常的情况
if(data && data.exceptionType && (data.exceptionType.indexOf("class com.frame.modules.base.exceptions.") != -1)){
plus.nativeUI.alert(data.message , function(){} , "提示：" , "取消");
return;
}
if(data && data.result && (data.result === "input")) {
plus.nativeUI.alert(data.message , function(){} , "提示：" , "取消");
return;
}
if(options.success){
options.success(data);
}
},
onError : function(a , b , c){
hideLoading();
if(options.error){
options.error(a , b , c);
}
}
};
return defaults;
}
function showLoading(msg){
plus.nativeUI.showWaiting(msg , {
/*round: "1px", //圆角*/
style: "white",
back:"none",//不响应返回按钮事件
background: "#66CDAA",
/*background:"rgba(110,120,50,1)",*/
loading: {
display:"inline" ,
icon:"/images/waiting.png"
}
});
}
function hideLoading(){
plus.nativeUI.closeWaiting();
}
}(mui, document));
mui.ajaxRequest(url , {
//以下参数均为可选，更多自定义参数见上述commonDefaults
data: {},
success: function(data){},
error: function(a, b, c){}
});
其中data为参数传递对象，如果此处有beforeSend、success、error等会在系统异常筛选范围外调用success、error实现，打到包装请求处理的目的。
东西比较简单，随便写写，也可参考另一篇文章《我理解的jquery.ajax请求的loading处理方式》，本站也有此文，同步的。
点赞
