数据量大，vue自动分页加载全部数据

/**
 * 单片执行单线任务，始终只执行一个相同的任务，如有新的任务，就得任务将被覆盖
 * 使用场景：计算依赖赋值、异步线性依赖请求、自动分页请求等
 */
function useRuntimeSingle(){
  let runkey: symbol;
  let status: 'normal' | 'stop' = 'normal';
  onBeforeUnmount(() => status = 'stop');

  async function run(_runkey: symbol, taskFn: Function, taskCallback?: Function) {
    for( ; true ; ) {
      const taskResult = await taskFn()
      if(_runkey !== runkey) throw '被下一次相同任务终止'
      if(status === 'stop') throw '组件已销毁，任务终止'
      await taskCallback?.(taskResult);
    }
  }

  return {
    /**
     * 任务切片执行
     * @param task 执行切片后的单次任务
     * @param taskCallback 执行切片后的单次任务回调
     */
    runtime: async (task: Function, taskCallback?: Function) => {
      runkey = Symbol();
      return run(runkey, task, taskCallback)
    }
  }
}

/**
 * 异步、自动分页加载，直到数据全部获取完毕
 */
function useGetResultItemList(){
  const { runtime } = useRuntimeSingle()

  function getData (resultParentIdList: number[]) {
    let total: number = 1;
    let pageNum = 1;
    let pageSize = 30;

    sampleList.value = []
    runtime(

      async function () {
        return await getResultItemList({ resutParentIdList: resultParentIdList.join(','), pageSize, pageNum })
      }, 

      async function (res: any) {
        res.data?.forEach(item => {
          item.seqContentObj = JSON.parse(item.seqContent)
          const integrationMethod = item.integrationMethod ?? {}
          item.integrationMethodObj = typeof integrationMethod === 'string' ? JSON.parse(item.integrationMethod) : integrationMethod
        })
        sampleList.value.push(...res.data as any[])

        total = res.total
        await nextTick()
        if (sampleList.value.length >= total) throw '分页请求已完成'

        pageNum++
        sampleLoading.value = false
      }

    )
  }

  return { getData }
}

调用：

const { getData } = useGetResultItemList()

....
await getData([1, 2, 3])

...