用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2018-4-2 00:28

我想要实现的效果是:可以上拉刷新,下拉加载,分别点击tab都还能够请求服务器。我想的最好的方法是把日期和月份这2个抽离出来做成一个方法,然后上拉刷新,下拉加载,点击tab分别调用日期和月份方法即可。我尝试百 ...

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

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

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

  1. wxRequest.getUserMessage()
  2. .then(=>res{
  3. console.log(res.code);
  4. })
  5. .catch()

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

  1. //我只是抽取我部分代码来展示
  2. Page({
  3. data:{
  4. },
  5. onLoad: function () {//生命周期
  6. this.readUserMesage();
  7. },
  8. readUserMesage(): function () {//获取用户信息,并获取按日期的数据
  9. this.showLoading();
  10. let parameters = 'user?ptId=aaaaaaaaaaaaaa';
  11. api.getRequest({
  12. parameters: parameters,
  13. }).then(res => {
  14. return this.readDayData(); //获取日期信息
  15. }).catch(error => {
  16. this.hideLoading();
  17. });
  18. },
  19. readMonthData() {//把月份单独抽取出来
  20. var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';
  21. var parameters = { parameters: url }
  22. return api.getRequest(parameters)//我这里是封装请求服务器的,注意我加了return
  23. .then(res => {
  24. //这里就可以获取到返回的res的集合数据
  25. }).catch(error => {
  26. console.log(JSON.stringify(error));
  27. this.hideLoading();
  28. });
  29. },
  30. readDayData() {//把日期单独抽取出来
  31. var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';
  32. var parameters = { parameters: url }
  33. return api.getRequest(parameters)//我这里是封装请求服务器的,注意我加了return
  34. .then(res => {
  35. //这里就可以获取到返回的res的集合数据
  36. }).catch(error => {
  37. this.hideLoading();
  38. });
  39. },
  40. onPullDownRefresh() {//下拉刷新
  41. if (this.data.currentIndex == 0) {//如果当前是在日期
  42. this.readDayData();
  43. } else {//如果当前是在月份
  44. this.readMonthData();
  45. }
  46. },
  47. onReachBottom() {//上拉加载
  48. if (this.data.currentIndex == 0) {
  49. this.readDayData();
  50. } else {
  51. this.readMonthData();
  52. }
  53. },
  54. )}

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


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 一个冬季 来自: 简书

相关阅读