小程序 Promise 連續(xù)請求服務器寫法,減少代碼量

效果展示圖.png

我想要實現(xiàn)的效果是:可以上拉刷新,下拉加載,分別點擊tab都還能夠請求服務器。我想的最好的方法是把日期和月份這2個抽離出來做成一個方法,然后上拉刷新,下拉加載,點擊tab分別調(diào)用日期和月份方法即可。我嘗試百度/google,見到最多的鏈式寫法,以獲取用戶數(shù)據(jù)舉例:

    //這里的操作都是舉例說明。
     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里面的?;蛘呤侵苯觛etUserMessage().then(res=>).catch();這樣直接獲取用戶數(shù)據(jù)了。

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

當然我這樣舉例還是不能說明存在什么問題,那么如果我要像上面圖那樣獲取日期數(shù)據(jù),月份數(shù)據(jù)怎么辦呢?難道按照第一個那樣寫,上拉加載那里寫一堆,下拉刷新那里一堆,切換tab也寫一堆重復的代碼?還是說我管你是上拉刷新,還是下拉加載好,我直接通過一個接口在一起獲取數(shù)據(jù)?所以我通過百度/google到他們寫的還不夠完善(不是寫的不好哈)
我的寫法:

//我只是抽取我部分代碼來展示
Page({
data:{
    
},
onLoad: function () {//生命周期
    this.readUserMesage();
},
readUserMesage(): function () {//獲取用戶信息,并獲取按日期的數(shù)據(jù)
    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的集合數(shù)據(jù)
      }).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的集合數(shù)據(jù)
      }).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();
    }
  },
)}

好了,我的方法介紹完成了。這樣做就可以減少代碼量了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容