vue中重复调用累加数据

发布于 12 天前 前端 最后更新于 12 天前


需求:调用一个方法,传入数组。然后定时调用另一个异步方法处理新的和旧的数据

     const handlePrintCallback = (list) => {
            if (!setting.value) {
                createMessage.warning("未配置打印设置或打印设置意外丢失,如需打印请配置打印设置");
                return;
            }
            // 原子化追加数据
            printList.value = [...printList.value, ...list];
            totalPrintNum.value += list.length;

            // 如果当前没有正在执行的打印任务
            if (!isPrinting.value) {
                isPrinting.value = true;
                startPrintQueue();
            }
        };
        //  打印队列处理逻辑
        const startPrintQueue = async () => {
            while (batchPrintIndex.value < totalPrintNum.value) {
                createMessage.destroy();
                createMessage.loading(
                    `正在打印第 ${batchPrintIndex.value + 1}/${totalPrintNum.value}份报告,请耐心等候...`,
                    0,
                );

                try {
                    await handlePrint(printList.value[batchPrintIndex.value]);
                    console.log(123); // 确保执行
                    batchPrintIndex.value++;
                } catch (e) {
                    clearPrintProcess();
                    createMessage.error(`打印失败: ${e.message}`);
                    return;
                }

                // 等待10秒再进行下一个任务(非并行)
                await new Promise((resolve) => setTimeout(resolve, 20000));
            }
            clearPrintProcess();
            createMessage.success("打印完成");
        };
        // 清理打印过程
        const clearPrintProcess = () => {
            clearInterval(printTimer.value);
            printTimer.value = null;
            isPrinting.value = false;
            createMessage.destroy();
        };

        // 组件卸载时清理定时器
        onBeforeUnmount(() => {
            clearPrintProcess();
        });