详解微信小程序网络请求接口封装实例
网络请求封装实例
实现定制要求和方便调用，对微信小程序的网络请求接口进行了封装
- 封装位置：app.js，方便全局调用
- 实现方法调用，只用关注接口url和入参
- 默认和自定义的请求成功、失败和完成的回调处理
- 可设置请求失败自动重新请求的次数
- 可以防止重复提交
- 每个请求设定requestCode
代码
直接将这个方法放在了app.js中
/**
*接口公共访问方法
*@param{Object}urlPath访问路径
*@param{Object}params访问参数（json格式）
*@param{Object}requestCode访问码，返回处理使用
*@param{Object}onSuccess成功回调
*@param{Object}onErrorBefore失败回调
*@param{Object}onComplete请求完成（不管成功或失败）回调
*@param{Object}isVerify是否验证重复提交
*@param{Object}requestType请求类型（默认POST）
*@param{Object}retry访问失败重新请求次数（默认1次）
*/
webCall:function(urlPath,params,requestCode,onSuccess,onErrorBefore,onComplete,isVerify,requestType,retry){
varparams=arguments[1]?arguments[1]:{};
//varrequestCode=arguments[2]?arguments[2]:1;
varonSuccess=arguments[3]?arguments[3]:function(){};
varonErrorBefore=arguments[4]?arguments[4]:this.onError;
varonComplete=arguments[5]?arguments[5]:this.onComplete;
varisVerify=arguments[6]?arguments[6]:false;
varrequestType=arguments[7]?arguments[7]:"POST";
varretry=arguments[8]?arguments[8]:1;
varthat=this;
//防止重复提交，相同请求间隔时间不能小于500毫秒
varnowTime=newDate().getTime();
if(this.requestCount[urlPath]&&(nowTime-this.requestCount[urlPath])<500){
return;
}
this.requestCount[urlPath]=nowTime;
//是否验证重复提交
if(isVerify){
if(this.verifyCount[urlPath]){
return;
}
this.verifyCount[urlPath]=true;//重复验证开关开启
}
console.log("发起网络请求,路径:"+(that.apiHost+urlPath)+",参数:"+JSON.stringify(params));
wx.request({
url:that.apiHost+urlPath,
data:params,
method:requestType,//OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
header:{
'content-type':requestType=='POST'?
'application/x-www-form-urlencoded':'application/json'
},//设置请求的header
success:function(res){
console.log("返回结果："+JSON.stringify(res.data));
if(res.data){
if(res.data.statusCode==200){//访问成功
onSuccess(res.data,requestCode);
}elseif(res.data.statusCode==300000001){//未登录
that.isLogin=false;
onErrorBefore(0,res.data.message,requestCode);
}else{
onErrorBefore(0,res.data.message==null?"请求失败,请重试":res.data.message,requestCode);
}
}else{
onErrorBefore(0,"请求失败,请重试",requestCode);
}
},
fail:function(res){
retry--;
console.log("网络访问失败："+JSON.stringify(res));
if(retry>0)returnthat.webCall(urlPath,params,requestCode,onSuccess,onErrorBefore,onComplete,requestType,retry);
},
complete:function(res){
onComplete(requestCode);
//请求完成后，2秒后重复验证的开关关闭
if(isVerify){
setTimeout(function(){
that.verifyCount[urlPath]=false;
},2000);
}
}
})
}
上面的verifyCount是放在data中的数组，apiHost是放在js最外层的接口服务器地址，方便随时开发、测试环境。
这个方法也是必不可少的
complete:function(res){
onComplete(requestCode);
//请求完成后，2秒后重复验证的开关关闭
if(isVerify){
setTimeout(function(){
that.verifyCount[urlPath]=false;
},2000);
}
}
})
调用示范
请求：
//请求homebanner数据
wx.showNavigationBarLoading();
app.webCall("/app/homeBanner",{},QUERY_BANNER,this.onSuccess,this.onErrorBefore,this.onComplete);
请求成功的回调处理：
/**
*接口访问成功返回
*@param{Object}data
*@param{Object}requestCode
*/
onSuccess:function(data,requestCode){
varthat=this;
switch(requestCode){
caseQUERY_BANNER:
that.setData({bannerData:(data?data.data:[])});
break;
}
QUERY_BANNER是放在js最外层的常量，用于接口访问完成后的回调方法来区分请求的接口是哪个。
请求完成的处理：
/**
*接口访问完成
*@param{Object}resultCode
*/
onComplete:function(resultCode){
console.log("homeonComplete1");
if(--mCurrentRequestNums<=0){
wx.hideNavigationBarLoading();
}
}
mCurrentRequestNums是放在js最外层的变量，表示发起请求的数量，用于多个接口同时被调用，并希望在全部请求结束后关闭标题栏加载动画时用。
以上所述是小编给大家介绍的微信小程序网络请求接口封装详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！