uniapp分頁第二次請求用法介紹

本文將從多個方面對uniapp分頁第二次請求進行詳細闡述，並給出對應的代碼示例。

一、請求參數的構造

在進行分頁請求時，需要傳遞的參數體包含當前頁碼以及每頁顯示的數據量。對於第二次請求，還需要包含第一次請求返回的最後一條記錄的id，以及上一頁最後一條記錄的id。這些參數的構造需要注意以下幾點：

1、當前頁碼

let currentPage = 2; //當前頁碼
let pageSize = 20; //每頁顯示的數據量

2、每頁顯示的數據量

let currentPage = 2; //當前頁碼
let pageSize = 20; //每頁顯示的數據量

3、第一次請求返回的最後一條記錄的id

let lastRecordId = '1234567'; //第一次請求返回的最後一條記錄的id

4、上一頁最後一條記錄的id

let lastPageLastRecordId = '2345678'; //上一頁最後一條記錄的id

二、請求數據的處理

對獲取到的數據進行處理，需要注意以下幾點：

1、數據的保存

第二次請求獲取到的數據需要與第一次請求返回的數據進行合併，可以利用數組的concat()方法對兩個數組進行合併。

let data = []; //用於保存請求到的數據
let newData = [{...},{...},{...}]; //新獲取到的數據
data = data.concat(newData); //將新獲取到的數據與之前返回的數據合併

2、是否還有下一頁

可以通過判斷獲取到的數量是否達到每頁顯示的數量，來確定是否還有下一頁數據。

let hasMoreData = false; //是否還有下一頁數據
if(newData.length === pageSize) {
    hasMoreData = true;
}

三、請求數據的展示

在對請求到的數據進行展示時，需要注意以下幾點：

1、循環展示數據

可以利用v-for指令對數據進行循環展示。

<ul>
    <li v-for="item in data" :key="item.id">
        <span>{{ item.title }}</span>
        <span>{{ item.time }}</span>
    </li>
</ul>

2、展示加載更多按鈕

當還有下一頁數據時，可以展示「加載更多」按鈕，點擊按鈕即可進行下一次請求。

<template>
    <div>
        <ul>
            <li v-for="item in data" :key="item.id">
                <span>{{ item.title }}</span>
                <span>{{ item.time }}</span>
            </li>
        </ul>
        <button v-if="hasMoreData" @click="loadMore">加載更多</button>
    </div>
</template>

//點擊「加載更多」按鈕後觸發的方法
methods: {
    loadMore() {
        //構造請求參數
        let params = {
            currentPage: this.currentPage + 1,
            pageSize: this.pageSize,
            lastRecordId: this.data[this.data.length-1].id,
            lastPageLastRecordId: this.lastPageLastRecordId
        };
        //發起請求
        this.requestData(params);
    }
}

四、請求出錯處理

在請求數據時，可能會出現一些錯誤，需要對這些錯誤進行處理。

1、網絡錯誤

如果請求時出現網絡錯誤，可以對錯誤進行處理，並提示用戶重新請求。

//發起請求，處理錯誤
async requestData(params) {
    try {
        let res = await this.$http.post(url, params);
        //處理請求數據
    } catch (err) {
        //處理錯誤
        this.$toast('網絡錯誤，請重試！');
    }
}

2、業務錯誤

如果請求到的數據中包含業務錯誤，例如沒有更多數據了，可以在展示數據時進行處理，並提示用戶。

//處理是否還有下一頁數據
async handleData(res) {
    let newData = res.data;
    this.hasMoreData = newData.length === this.pageSize;
    if(!this.hasMoreData) {
        this.$toast('沒有更多數據了！');
    }
    //將新獲取到的數據與之前返回的數據合併
    this.data = this.data.concat(newData);
}

五、總結

本文從請求參數的構造、請求數據的處理、請求數據的展示、請求出錯處理等多個方面對uniapp分頁第二次請求進行了詳細闡述，並給出了對應的代碼示例，希望能對大家有所幫助。