说明:
这篇博客其实和之前发的一篇博文是差不多的,只不过一个是在vue环境使用,一个是在微信小程序下使用。
同样:封装基于promise
解决问题:
1、ajax加载蒙版
2、全局错误提示
3、全局成功提示
4、防抖功能配合(解决蒙版延迟导致客户能够点击多次)
5、默认数据过滤处理,当字符串中出现NaN,undefined,null则过滤,数据为空过滤,注意长度为零的数组不过滤
代码部分(需要的可以直接拷贝):
let msg = {
//成功信息
success(text){
wx.showToast({
title: text,
image: "",
mask: false,
icon: 'none',
duration: 2000
})
},
//错误信息
error(text){
wx.showToast({
title: text,
image: "",
mask: false,
icon: 'none',
duration: 2000
})
}
};
//过滤空数据字符串包含NaN,undefined,null
const filterdata = json => {
let newJson = {};
let reg = RegExp(/NaN|undefined|null/);
for (let li in json) {
if (json[li] && !reg.test(json[li])) {
newJson[li] = json[li];
}
}
return newJson;
};
/*支持传入参数
* header,data,method,dataType,responseType,is_suc,is_err,loadinfo,isloading
* */
let dht_ajax=function (opt){
//ajax默认请求参数,已小程序默认数据为准
let url=opt.url||"",
header={},
data=opt.data||{},
method=opt.method||"get",
dataType=opt.dataType||"json",
responseType=opt.responseType||"text",
//成功提示信息,传入true则提示默认信息,传入字符串则出现字符串信息
is_suc = opt.is_suc || false,
//错误提示信息,默认不出现,传入true则出现后端接口提示信息,传入字符串则提示字符串信息
is_err = opt.is_err || false,
//loading加载的参数
title= opt.loadinfo || "加载中...", //加载的提示
isloading=opt.isloading || false, //当需要全局加载提示的时候
filterNull = o.filterNull !== false;; //是否过滤空数据,默认true
//默认提示信息处理
is_suc = is_suc === true ? "操作成功" : is_suc;
is_err = is_err === true ? "网络异常" : is_err;
//过滤空数据处理
data = filterNull === true ? filterdata(data) : data;
//传入header值则走header,这里对post情况下的header值进行另外处理
if(opt.header){
header=opt.header;
//否则当传入post并且header没有传递的情况下默认值
}else if(method.toLowerCase()==="post"&&Object.keys(header).length===0){
header={'content-type': 'application/x-www-form-urlencoded;charset=utf-8'}
}
if(isloading){
wx.showLoading({
title:title,
mask:true //统一使用的时候不允许进行操作
});
}
return new Promise((suc,err)=>{
wx.request({
url:url,
data:data,
header:header,
method:method,
dataType:dataType,
responseType:responseType,
success:res=>{
let req = res.data;
if(isloading){
wx.hideLoading();
}
if(res.data.code===0){
//正确信息处理
is_suc !== false && msg.success(is_suc);
suc(res);
}else {
//错误信息处理,这里错误信息优先丢出后端返回的错误信息,否则丢出自定义信息
if (is_err !== false) {
is_err !== "网络异常" ? msg.error(is_err) : msg.error(req.msg ? req.msg : "网络异常")
}
err(res);
}
},
fail:er=>{
if(isloading){
wx.hideLoading();
}
//错误信息处理
is_err !== false ? msg.error(is_err) : false;
err(er);
}
});
});
};
//定时器计数器
let timeOut = null;
//暴露出去的ajax
let ajax = function(opt) {
//是否防抖
let isAntiShake = opt.isAntiShake || false;
let shakeTime = opt.shakeTime || 500; //默认防抖时间半秒
if (!isAntiShake) {
//不进行防抖处理
return new Promise((suc, err) => {
dht_ajax(opt)
.then(e => {
suc(e);
})
.catch(e => {
err(e);
});
});
} else {
//进行防抖处理
return new Promise((suc, err) => {
timeOut && clearTimeout(timeOut);
let callNow = !timeOut;
if (callNow) {
dht_ajax(opt)
.then(e => {
suc(e);
})
.catch(e => {
err(e);
});
}
timeOut = setTimeout(
() => {
timeOut = null;
}, //见注解
shakeTime
);
});
}
};
module.exports={ajax};
使用:
这个直接引入文件,或者其他都行。