Чтение нескольких файлов синхронно в Javascript с использованием FileReader

Question

У меня есть итерации в for цикл по количеству файлов

Я должен прочитать первую строку каждого файла и добавить его, скажем, на карте, имеющей имя файла в качестве ключа и Первая строка этого файла в качестве значения.

Я использую 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

Вы можете использовать обещания и позволить им работать в порядке их создания с помощью 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 
});