延迟服务呼叫，直到循环后

Question

我的组件中有一个函数，即将文件处理成一个数组，然后通过调用其中一个函数将数组上传到数据服务。

我正在将上传的CSV文件解析为JSON数据数组。在processFiles函数中，我循环遍历数组以将数据推入processedData数组。之后，我从数据服务调用this.passData.pushPassedData函数来推送已处理的数据。

问题是this.passData.pushPassedData函数在for循环完成处理文件之前执行，并且只向空数组推送数据服务。

files = []; // array to store uploaded files
processedData = []; // array to store processed JSON data

processFiles() {
    for (let file of this.files) {
        this.papaService.parse(file, {
            header: true,
            dynamicTyping: true,
            complete: (results) => {
                console.log("Detected: ", results.data);

                for (let entry of results.data) {
                    if (entry.Interface !== "") {
                        let _entry: RuleFormat;

                        _entry = {
                            abc: "xyz",
                            def: "123",
                        }
                        this.processedData.push(_entry);
                        console.log("Pushed: " + JSON.stringify(_entry));
                    }
                }
            }
        })
    }
    console.log("Pushed: " + JSON.stringify(this.processedData));
    this.passData.pushPassedData(this.processedData);
}

从控制台，我可以看到只有在调用数据服务函数后才将数据推送到数组中。

有没有办法让函数调用等待for循环？

Answer 1

你可以在processFiles中添加一个计数器并在complete回调中递增它。在处理完所有文件后，您可以调用this.passData.pushPassedData：

files = []; // array to store uploaded files

processFiles() {

    let processedFileCount = 0;

    for (let file of this.files) {
        this.papaService.parse(file, {
            ...

            complete: (results) => {
                processedFileCount += 1;

                for (let entry of results.data) {
                    ...
                }

                if (processedFileCount >= files.length) {
                    // All files have been processed
                    this.passData.pushPassedData(this.processedData);
                }
            }
        });
    }
}