En la vida diaria de un desarrollador Javascript, una tarea de rutina puede ser la gestión y lectura de múltiples archivos. Esta aparentemente sencilla operación puede conducir a una serie de problemas si no se maneja correctamente.
Manejando archivos en Javascript
Primero, vamos a entender cómo se puede realizar la lectura de archivos en Javascript. Para ello, vamos a utilizar la API de FileReader. Supongamos que tenemos un archivo de texto y queremos leer su contenido.
let file = ... // Este es tu archivo
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
console.log(reader.result);
}
El Problema
Ahora, ¿qué pasa si en lugar de un solo archivo tenemos varios archivos? Podríamos intentar usar un bucle for/forEach para leer cada archivo, pero aquí es donde se presenta el problema. Javascript opera de forma asíncrona, por lo que nuestro bucle no esperará a que se complete la lectura de un archivo antes de pasar al siguiente.
Entendiendo la Asincronía en Javascript
Un concepto clave para resolver nuestro problema es entender cómo funciona la asincronía en Javascript. Este lenguaje de programación tiene algo llamado Event Loop que permite realizar tareas de manera asíncrona.
Manejo de múltiples archivos
Entonces, ¿cómo podemos manejar que varios archivos se lean correctamente? La solución a esto es utilizar Promesas y async/await en Javascript.
Promesas en Javascript
Las Promesas son un objeto devuelto por una función, que eventualmente se completará o será rechazada. Podemos envolver nuestra operación de lectura de archivo en una promesa y luego esperar a que se resuelva antes de proceder.
function readFile(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = resolve;
reader.onerror = reject;
reader.readAsText(file);
})
}
Async/Await en Javascript
Ahora que tenemos nuestra función de lectura de archivo promisificada, podemos usarla con async/await para garantizar que cada archivo se lea completamente antes de pasar al siguiente.
async function readMultipleFiles(files) {
for(let file of files) {
let result = await readFile(file);
console.log(result.target.result);
}
}
Más allá
La explicación anterior aborda un caso simple, en un ambiente de producción real puede que debamos manejar errores, leer archivos de diferentes tipos, o incluso leer archivos de forma paralela. Toda estas situaciones exigen una comprensión más profunda de la manera en que funciona Javascript. No obstante, con lo ya aprendido deberías estar en el camino correcto para resolver el Problema con lectura de varios archivos, una de las problemáticas más comunes en la programación Javascript.