微信小程序封装的HTTP请求示例【附升级版】
本文实例讲述了微信小程序封装的HTTP请求。分享给大家供大家参考，具体如下：
微信小程序里自己封装了请求的函数，但几乎每个页面都要用到，所以为什么更方便的调用，再一次进行封装。
在app.js里面定义个全局对象，这样想要用到该函数，只需要在该页面的js文件里面，请求一个app实例。
废话不多说，先上代码：
//全局对象httpClient
httpClient:{
request:function(method,url,data){
//返回一个promise实例
returnnewPromise((resolve,reject)=>{
wx.request({
url:url,
data:data,
mehtod:method,
success:function(res){
resolve(res)
},
fail:function(res){
reject(res);
},
complete:function(){
console.log('complete');
}
})
})
}
//get方法：用来获取数据
get:function(url){
returnthis.request('GET',url);
},
//post方法：用来更新数据
post:function(url,data){
resturnthis.request('POST',url,data);
},
//put方法
put:function(url,data){
returnthis.request('PUT',url,data);
},
//delete方法
delete:function(url,data){
returnthis.request('DELETE',url,data);
}
在需要请求的页面调用：
例如：登录页面login.js
//获取app实例,从而调用全局对象的函数
varapp=getApp();
login:function(){
varurl='http:xxxxx/login';
vardata={
userName:'xxxxx',
passwd:'xxxxxx'
}
app.httpClient.post(url,data)
.then(res=>{console.log("请求成功时调用该函数")})
.catch(res=>{console.log("请求失败时调用该函数")})
}
//为了更好的阅读，也可以将回调函数，定义在外面
//这样
loginSuccess:function(){
console.log("请求成功时调用该函数")
},
loginFail:function(){
console.log("请求失败时调用该函数")
},
login:function(){
varself=this;
varurl='http:xxxxx/login';
vardata={
userName:'xxxxx',
passwd:'xxxxxx'
}
app.httpClient.post(url,data)
.then(res=>self.loginSuccess())
.catch(res=>self.loginFail())
}
是不是简洁多了。。。。
附：升级版
上代码
//该函数怎么写，需要跟后端人员协商返回的格式
functiongetErrorMsgByErrorNo(error_no){
leterror_msg;
switch(error_no){
case100:error_msg='操作失败，请稍后再试！';break;
default:error_msg='网络错误，请稍后再试！';break;
}
returnerror_msg;
}
functionhandleData(res){
if(res.data.success){
if(typeof(res.data.body)==='string'){
return[];
}elseif(Array.isArray(res.data.body)===false){
const_arr=[];
_arr.push(res.data.body);
return_arr;
}else{
returnres.data.body;
}
}else{
if(res.data.error_no){
return{
error_no:res.data.error_no,
error_msg:getErrorMsgByErrorNo(res.data.error_no)
};
}else{
return{
error_no:123456,
error_msg:'服务器维护中，请稍后!'
};
}
}
}
consthttpClient={
request:function(method,url,data){
returnnewPromise((resolve,reject)=>{
wx.request({
url:url,
data:data,
method:method,
success:function(res){
resolve(handleData(res))
},
fail:function(err){
console.log('requestfail',err);
resolve({
error_no:100,
error_msg:getErrorMsgByErrorNo(100)
})
},
complete:function(res){
console.log("requestcompleted!");
}
})
});
},
get:function(url){
returnthis.request('GET',url);
},
post:function(url,data){
returnthis.request('POST',url,data);
},
put:function(url,data){
returnthis.request('PUT',url,data);
},
delete:function(url,data){
returnthis.request('DELETE',url,data);
},
};
module.exports=httpClient;
使用
functiongetMyselfData(){
const_Url=urls.url;
returnhttpClient.get(_Url);
}
getData(){
letresultsData=this.getMyselfData();
resultsData.then((res)=>{
if(res.error_no){
//只要有error_no就说明请求出现了错误
this.toast.showToast({
type:'fail',
title:res.error_msg,
})
}else{
this.setData({
journeyList:res.data
})
}
});
},
希望本文所述对大家微信小程序开发有所帮助。