小程序 Promise 连续请求服务器写法,减少代码量


我想要实现的效果是:可以上拉刷新,下拉加载,分别点击tab都还能够请求服务器。我想的最好的方法是把日期和月份这2个抽离出来做成一个方法,然后上拉刷新,下拉加载,点击tab分别调用日期和月份方法即可。我尝试百度/google,见到最多的链式写法,以获取用户数据举例:

//这里的操作都是举例说明。
    wxLogin()
.then(=>res{
                 console.log(res.code)
return wxRequest.getUserOpenId(url, params)//请求获取用户ID
})
.then(=>res{
                 console.log(res.openId)
return wxRequest.getUserPhone());//请求获取用户手机
})
.catch()

在index.js页面 ; getUserOpenId()和getUserPhone()都是封装在另外一个js里面的。或者是直接getUserMessage().then(res=>).catch();这样直接获取用户数据了。

    wxRequest.getUserMessage()
.then(=>res{
                     console.log(res.code);
})
.catch()

当然我这样举例还是不能说明存在什么问题,那么如果我要像上面图那样获取日期数据,月份数据怎么办呢?难道按照第一个那样写,上拉加载那里写一堆,下拉刷新那里一堆,切换tab也写一堆重复的代码?还是说我管你是上拉刷新,还是下拉加载好,我直接通过一个接口在一起获取数据?所以我通过百度/google到他们写的还不够完善(不是写的不好哈)
我的写法:

//我只是抽取我部分代码来展示
Page({
data:{

},
onLoad: function () {//生命周期
this.readUserMesage();
},
readUserMesage(): function () {//获取用户信息,并获取按日期的数据
this.showLoading();
let parameters = 'user?ptId=aaaaaaaaaaaaaa';
   api.getRequest({
     parameters: parameters,
}).then(res => {
return this.readDayData(); //获取日期信息
}).catch(error => {
this.hideLoading();
});
},
readMonthData() {//把月份单独抽取出来
var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';
var parameters = { parameters: url }
return api.getRequest(parameters)//我这里是封装请求服务器的,注意我加了return
.then(res => {
//这里就可以获取到返回的res的集合数据
}).catch(error => {
       console.log(JSON.stringify(error));
this.hideLoading();
});
},
readDayData() {//把日期单独抽取出来
var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';
var parameters = { parameters: url }
return api.getRequest(parameters)//我这里是封装请求服务器的,注意我加了return
.then(res => {
//这里就可以获取到返回的res的集合数据
}).catch(error => {
this.hideLoading();
});
},
onPullDownRefresh() {//下拉刷新
if (this.data.currentIndex == 0) {//如果当前是在日期
this.readDayData();
} else {//如果当前是在月份
this.readMonthData();
}
},
onReachBottom() {//上拉加载
if (this.data.currentIndex == 0) {
this.readDayData();
} else {
this.readMonthData();
}
},
)}

好了,我的方法介绍完成了。这样做就可以减少代码量了。


作者:一个冬季
链接:小程序 Promise 连续请求服务器写法,减少代码量
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值