uniapp分页第二次请求用法介绍

ZRYYQ • 2025-04-27 15:26 • 编程

本文将从多个方面对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分页第二次请求进行了详细阐述，并给出了对应的代码示例，希望能对大家有所帮助。

原创文章，作者：ZRYYQ，如若转载，请注明出处：https://www.506064.com/n/373445.html