使用JSZip时异步任务结束后检查数组内容的问题

你的代码存在两个关键问题导致数组检查逻辑提前执行：

• _ziptask 函数内的 file.async("string") 是异步操作，但未用 await 等待其完成，函数会直接走完循环，不等XML解析结束。
• 最后定义的匿名异步函数仅做了声明，没有实际调用，导致数组检查逻辑根本没执行。

修正后的代码 #

fileElement.addEventListener('change', (e) => {
    try {
        const zip = new JSZip();
        zip.loadAsync(fileElement.files[0])
            .then(async function(zip) { // 改为async函数，方便内部使用await
                let xmlfiles = [];
                // 遍历压缩包内文件
                for (const [filename, file] of Object.entries(zip.files)) {
                    if (filename.includes("file.xml")) {
                        // 等待文件读取完成
                        const data = await file.async("string");
                        const xmlDoc = new DOMParser().parseFromString(data, "text/xml");
                        const metaInputs = [...xmlDoc.querySelectorAll("file")];
                        xmlfiles = metaInputs.filter(_node => _node.getAttribute('src') !== null);
                        console.log("FILE.XML LOOP ENDED");
                    }
                }
                // 此时XML已解析完成，可正常检查数组
                console.log("CHECKING FILE.XML ARRAY ");
                console.log(xmlfiles);
            })
            .catch(function() {
                console.error("ERROR: NOT ZIP FILE");
            });
    } catch (error) {
        restoreFileInput("Something went wrong, try it again later");
    }
});

简化版（已知压缩包仅含单个XML文件） #

如果确定压缩包里只有目标XML文件，可以跳过遍历直接定位：

fileElement.addEventListener('change', (e) => {
    try {
        const zip = new JSZip();
        zip.loadAsync(fileElement.files[0])
            .then(async function(zip) {
                let xmlfiles = [];
                // 直接找到目标文件
                const targetFile = Object.values(zip.files).find(file => file.name.includes("file.xml"));
                if (targetFile) {
                    const data = await targetFile.async("string");
                    const xmlDoc = new DOMParser().parseFromString(data, "text/xml");
                    const metaInputs = [...xmlDoc.querySelectorAll("file")];
                    xmlfiles = metaInputs.filter(_node => _node.getAttribute('src') !== null);
                    console.log("FILE.XML PARSED");
                }
                console.log("CHECKING FILE.XML ARRAY ");
                console.log(xmlfiles);
            })
            .catch(function() {
                console.error("ERROR: NOT ZIP FILE");
            });
    } catch (error) {
        restoreFileInput("Something went wrong, try it again later");
    }
});

核心注意点 #

• 对JSZip的异步方法（loadAsync、async）必须用 await 或正确链式调用 then，确保后续代码在异步操作完成后执行。
• 避免仅定义异步函数却不调用的无效写法。

内容的提问来源于stack exchange，提问作者Oversitoo