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