小程式下滑分頁獲取資料封裝

2022-08-13 15:18:22 字數 1934 閱讀 3181

可能情況:

1、一條資料沒有

2、到最後一頁

4、上滑觸底,獲取資料,應避免重**送請求,所以使用資料鎖

5、防抖和節流:還可以禁用、倒計時、模態等方式防止重**送請求

思路:1、判斷是否還有資料

2、設定鎖,鎖開正常獲取資料,鎖關,證明還在請求資料,後面點選操作不做處理

3、設定乙個屬性,作為判斷是否是最後一頁的標識,

4、設定乙個獲取實時url的屬性,因為每次請求的資料的頁碼都不一樣,所以整個url都不一樣,需要獲取到最新的url

5、傳送請求,返回結果為空,返回資料乙個空物件,返回結果非空,判斷是否是最後一頁,並設定最後一頁的屬性值是true/false

6、如果還有資料,請求的起始條數加上每次獲取的條數

7、資料累加

8、釋放鎖

/*

* * 分頁類不關心細節

* paging 需要儲存狀態,所以應該要以例項化的形式供呼叫方呼叫 */

/*** 業務呼叫主方法

* @returns |>}

*/async getmoredata()

//檢查是否已經鎖了,也就是請求的資料是否已經返回

if (!this

._getlocker())

//真實請求資料

const data = await this

._actualgetdata()

//釋放鎖

this

._releaselocker()

return

data

}/**

* 真實傳送請求、判斷資料結構(異常處理等情況),返回乙個物件

* @returns

* @private

*/async _actualgetdata()

if (paging.total === 0)

}this.moredata = this

._moredata(paging.total_page, paging.page)

//判斷是否還有資料

if (this

.moredata)

this

._accumulate(paging.items)

return

}/**

* 獲取當前的物件,也就是當前返回的資料物件

* @returns

* @private

*/_getcurrentreq() &count=$`

if (url.indexof('?') !== -1)

else

this.req.url =url

return

this

.req

}/**

* 判斷是否是最後一頁,是否還有資料

* @param totalpage 總頁數

* @param pagenum 當前頁數,0開始計數

* @returns

* @private

*/_moredata(totalpage, pagenum)

/*** 累加每次請求的資料

* @param items 請求返回的資料

* @private

*/_accumulate(items)

/*** 獲取鎖的狀態

* @returns

* @private

*/_getlocker()

//如果鎖是開的

this.locker = true

return

true

} /**

* 釋放鎖

* @private

*/_releaselocker()

}export

WeChat小程式封裝資料請求

module.exports 生產環境 prod 測試環境 test const require request.js 專案中用到的各種業務介面的封裝 module.exports banner圖介面 getbanner 商品詳情介面 getdetail id true 其他介面.針對wx.requ...

小程式資料介面封裝

環境位址的統一 module.exports 生產環境 prod 測試環境 test 業務資料請求方法的統一 比如 商品列表介面,詳情介面,加入收藏介面,搜尋介面 const require request.js 專案中用到的各種業務介面的封裝 module.exports banner圖介面 ge...

微信小程式獲取介面的封裝

1 第一步在pages同層級建立乙個config檔案然後裡面建立乙個config.js檔案 裡面寫入 const config export 匯出2 第二步在utils檔案裡建立乙個request.js檔案然後 引入config檔案 專案的公共介面 import from config config...