examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 修复无限加载页面的错误处理逻辑，优化数据加载和缓存更新
All checks were successful
/ depcheck (push) Successful in 1m32s
Details
/ build-and-deploy-to-vercel (push) Successful in 1m16s
Details
/ playwright (push) Successful in 2m0s
Details

Browse Source
This commit is contained in:
严浩
2025-01-02 17:12:08 +08:00
parent 24966a3b7d
commit d132ae7484
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/infinite-loading/index.page.vue
View File

@ -31,18 +31,19 @@ const list = shallowRef<Record<string, never>[]>(lastCache.list);
const loadData = async (page: number) => { const loadData = async (page: number) => {
if (!lastCache.hasMore) return { hasMore: false }; if (!lastCache.hasMore) return { hasMore: false };
const newPage = page + lastCache.page;
await new Promise((resolve) => setTimeout(resolve, 250 + 1000)); await new Promise((resolve) => setTimeout(resolve, 250 + 1000));
if (page === 2 && isPage2ErrorVisible) { if (newPage === 2 && isPage2ErrorVisible) {
isPage2ErrorVisible = false; isPage2ErrorVisible = false;
throw new Error('Failed to load comments. Because page === 2'); throw new Error('Failed to load comments. Because page === 2');
} }
const response = await fetch( const response = await fetch(
`https://jsonplaceholder.typicode.com/comments?_page=${page + lastCache.page}&_limit=1&timestamp=${Date.now()}`, `https://jsonplaceholder.typicode.com/comments?_page=${newPage}&_limit=1&timestamp=${Date.now()}`,
); );
const data = await response.json(); const data = await response.json();
list.value = list.value.concat(data); list.value = list.value.concat(data);
const hasMore = list.value.length < 5; const hasMore = list.value.length < 5;
updateCache({ page: page + lastCache.page, list: list.value, hasMore }); updateCache({ page: newPage, list: list.value, hasMore });
return { hasMore }; return { hasMore };
}; };
</script> </script>