mehr Dateien synchron in Javascript mit Filereader

Question

Ich habe eine for Schleife Iterieren über die Anzahl der Dateien

Ich habe Lese die erste Zeile jeder Datei zu lesen, und fügen Sie das auf eine Karte mit Dateinamen als Schlüssel sagen lassen und erste Zeile dieser Datei als Wert.

Ich verwende FileReader, um die Datei zu lesen, aber es ist asynchron.

Wenn ich einen Stream zum Lesen der Datei öffne, wird die Schleife inkrementiert, bevor ich mit dem Lesen der Datei fertig bin und den gewünschten Eintrag zur Karte hinzufüge.

Ich brauche einen synchronen Vorgang, d. H. Lies die erste Zeile, füge sie zur Karte hinzu und inkrementiere dann die Schleife und fahre mit der nächsten Datei fort.

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

So ändern Sie den Code, um die oben genannte Funktionalität zu erreichen.

Answer 1

Sie können Versprechungen verwenden und sie in der Reihenfolge ausführen lassen, in der Sie sie erstellen, indem Sie reduce verwenden.

Der folgende Code zeigt, wie es auf diese Weise gemacht werden kann, und Sie können einen Blick auf diese einfache JSFiddle werfen, die die Idee demosiert.

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