javascript - 使用 FileReader 在 Javascript 中同步读取多个文件

Question

我有一个 for 循环迭代文件数量

我必须读取每个文件的第一行并将其添加到一个以文件名作为键、以该文件的第一行作为值的映射中。

我正在使用 FileReader 读取文件，但它是异步的。

当我打开一个流来读取文件时，在完成读取文件并将所需条目添加到 map 之前，循环会增加。

我需要一个同步操作，即读取第一行，将其添加到映射中，然后增加循环并继续处理下一个文件。

for (var i = 0; i < files.length; i++){

    var file = files[i];

    var reader = new FileReader();

    reader.onload = function(progressEvent){
    var lines = progressEvent.target.result.split('\n');
    firstLine = lines[0];
    alert('FirstLine'+firstLine);   
    //add to Map here 
    }

    reader.readAsText(file);
}

如何修改代码以实现上述功能。

Answer 1

您可以使用 Promise 并让它们按照您使用 reduce 创建的顺序运行。

下面的代码展示了如何通过这种方式完成，您可以看一下这个简单的 JSFiddle这演示了这个想法。

//create a function that returns a promise
function readFileAndAddToMap(file){
    return new Promise(function(resolve, reject){
        var reader = new FileReader();
        reader.onload = function(progressEvent){
            var lines = progressEvent.target.result.split('\n');
            firstLine = lines[0];
            console.log('FirstLine'+firstLine);   
            //add to Map here 
            resolve();
        }

        reader.onerror = function(error){
            reject(error);
        }

        reader.readAsText(file);
    });
}

//create an array to hold your promises
var promises = [];
for (var i = 0; i < files.length; i++){
    //push to the array
    promises.push(readFileAndAddToMap(files[i]));
}

//use reduce to create a chain in the order of the promise array
promises.reduce(function(cur, next) {
    return cur.then(next);
}, Promise.resolve()).then(function() {
    //all files read and executed!
}).catch(function(error){
    //handle potential error
});