使用的FileReader

Question

我有过文件

我要读每一个文件的第一行，并添加的数量for循环迭代在Javascript中同步读取多个文件，它让我们的地图有文件名作为重点说和该文件的第一行作为值。

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

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

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

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 
});