分页懒加载与前端并发控制

1
const rows = ref([])
2
const pageNum = ref(1)
3
const pageSize = 20
4
const total = ref(0)
5
const loading = ref(false)
6
const loadingMore = ref(false)
7
const hasMore = computed(() => rows.value.length < total.value)

1
const targetPage = reset ? 1 : pageNum.value + 1
2
const response = await fetchList({ pageNum: targetPage, pageSize })
3
rows.value = reset ? response.rows : mergeUnique(rows.value, response.rows)
4
pageNum.value = targetPage

1
if (loading.value || loadingMore.value) return
2
if (!reset && !hasMore.value) return

1
function mergeUnique(current, incoming) {
2
  const map = new Map()
3
  current.concat(incoming).forEach(item => map.set(String(item.id), item))
4
  return [...map.values()]
5
}

1
let queryVersion = 0
2
async function query() {
3
  const version = ++queryVersion
4
  const result = await fetchList(currentParams.value)
5
  if (version !== queryVersion) return
6
  rows.value = result.rows
7
}