javascript - axios 从 GET 请求响应中设置 GET 请求的 URL
问题描述
这个问题与这个问题非常相似
我已经用 Laravel 建立了一个 Vue 页面,并在 GET 请求的帮助下显示所有帖子。我还在收听 Laravel ECHO 事件以及unshifting
所有帖子数组的值,使其显示在顶部。
我已经使用这个包设置了无限滚动并为每页分页 5 个结果。结果显示在页面上,并且从侦听器推送到数组也可以。但是,当无限滚动加载第 2 个结果页面时,会重复第 6 个结果。
前面提到的包接受next_cursor
一个偏移值作为参数,而不是page=2
因此它完全加载该值而没有任何重复。
控制器.php
public function pusherGet(Request $request) {
$jobs = Job::orderBy('id','desc')->cursorPaginate();
return response()->json($jobs);
}
Vue文件
<template>
<div>
<h3 class="text-center">All Jobs</h3><br/>
<div class="container">
<div class="card" v-for="(job,index) in jobs" :key="index">
<div class="card-body">
<h4 class="card-title">{{ job.id }}</h4>
<p class="card-text">{{ job.request_type}}</p>
</div>
</div>
</div>
<infinite-loading @infinite="getJob"></infinite-loading>
</div>
</template>
<script>
export default {
data() {
return {
page:1,
jobs: [],
}
},
mounted() {
this.listenNewJobs();
},
created() {
},
methods: {
listenNewJobs() {
Echo.channel('chat-room.1')
.listen('JobCreated', (e) => {
console.log(e);
this.jobs.unshift(e.job);
});
},
getJob($state) {
axios.get('getjobs', {
params: {
page: this.page,
},
}).then(({data})=> {
console.log(data)
if(data.data.length) {
this.page += 1;
this.jobs.push(...data.data)
$state.loaded();
} else {
$state.complete();
}
});
}
}
}
</script>
结果 Json
{
data: Array(5), path: "getjobs?page=1", previous_cursor: "100", next_cursor: "96", per_page: 5, …}
data: (5) [{…}, {…}, {…}, {…}, {…}]
next_cursor: "96" // this is the parameter which i should attach to the GET request to paginate correct results
next_page_url: "getjobs?page=1&next_cursor=96"
path: "getjobs?page=1"
per_page: 5
prev_page_url: "getjobs?page=1&previous_cursor=100"
previous_cursor: "100"
__proto__: Object
任何帮助将不胜感激。
编辑:如何设置 GET 请求的 URL 以对分页结果的 GET 请求响应的结果进行分页以避免第二页结果重复?
解决方案
尝试以下操作:
<script>
export default {
data() {
return {
jobs: [],
isInitialLoaded: false,
currentPage: 1,
lastPage: 0,
}
},
mounted() {
this.listenNewJobs();
},
created() {
//
},
methods: {
listenNewJobs() {
Echo.channel('chat-room.1')
.listen('JobCreated', (e) => {
console.log(e);
this.jobs.unshift(e.job);
});
},
async getJob($state){
await this.fetchData().then((response) => {
this.lastPage = response.data.last_page;
if (response.data.data.length > 0) {
response.data.data.forEach((item) => {
const exists = this.jobs.find((job) => job.id == item.id);
if (!exists) {
// this.jobs.unshift(item); // Add to front of array
this.jobs.push(item);
}
});
if (this.currentPage - 1 === this.lastPage) {
this.currentPage = 2;
$state.complete();
} else {
this.currentPage += 1;
}
$state.loaded();
} else {
this.currentPage = 2;
$state.complete();
}
});
this.isInitialLoaded = true;
},
fetchData() {
const url = this.isInitialLoaded ? `/getjobs?page=${this.currentPage}` : `/getjobs`;
return axios.get(url);
},
}
}
</script>
推荐阅读
- python - IDE 中的异常对象和缺少 __context__ 和 __cause__ 属性
- python-2.7 - 在 Centos 7 上使用 python 2.7 将 gradle 添加到 PATH 变量
- django - 如何创建查询集以过滤键名中带有 __ 的 jsonb 字段
- sybase - 我使用什么 SQL 来转换(大)日期时间以显示微秒?
- python - 我在使用模板视图时遇到此错误
- regex - 在 Apache 2.4 中使用 REQUEST_URI 和 ap_expr 设置 Header
- javascript - 在 Javascript 中实现多线程合并排序的问题
- ms-access - 根据 Access 中的是/否答案将多个数字字段添加在一起
- javascript - TypeError:试图分配给只读属性。【批量写入、云火库】
- php - 如何提高查询大量数据的 Laravel 页面的速度