升级版:微信小程序之封装HTTP请求(升级版)
微信小程序里自己封装了请求的函数,但几乎每个页面都要用到,所以为什么更方便的调用,再一次进行封装。
在app.js里面定义个全局对象,这样想要用到该函数,只需要在该页面的js文件里面,请求一个app实例。
废话不多说,先上代码:
//全局对象httpClient
httpClient:{
request:function(method,url,data){
//返回一个promise实例
return new Promise( (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 ) {
return this.request('GET',url);
},
//post方法:用来更新数据
post:function( url,data) {
resturn this.request('POST',url,data);
},
//put方法
put:function(url,data){
return this.request('PUT', url, data);
},
//delete方法
delete:function(url,data){
return this.request('DELETE', url, data);
}
在需要请求的页面调用:
例如:登录页面login.js
//获取app实例,从而调用全局对象的函数
var app=getApp();
login:function(){
var url='http:xxxxx/login';
var data={
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(){
var self=this;
var url='http:xxxxx/login';
var data={
userName:'xxxxx',
passwd:'xxxxxx'
}
app.httpClient.post( url,data )
.then( res=>self.loginSuccess())
.catch(res=>self.loginFail())
}
是不是简洁多了。。。。