¿Cómo espero a que FileReader.onload se complete primero?
Estoy trabajando con FileReader y me he encontrado con un problema en el método onLoad de FileReader, que no se ejecuta de forma sincrónica con el resto del código. Básicamente, tengo 2 funciones como estas:
imageExists(url, callback) {
var img = new Image();
img.onload = function () { callback(true); };
img.onerror = function () { callback(false); };
img.src = url;
}
isImageCorrupt(file): boolean {
var reader = new FileReader();
var isCorrupt = false;
reader.readAsDataURL(file);
reader.onload = (e) => {
this.imageExists(e.target.result, (exists) => {
if (exists) {
isCorrupt = false;
// La imagen no está corrupta
} else {
isCorrupt = true;
// La imagen está corrupta
}
});
};
return isCorrupt;
}
La función isImageCorrupt() llama al evento reader.onLoad que a su vez llama a la función de callback imageExists, que también contiene un método onload para la imagen.
El problema es que durante la ejecución de la función isImageCorrupt(), el evento reader.onLoad aún no ha cambiado el valor de isCorrupt, pero la función ha devuelto el valor en la última línea, que siempre es falso.
Quiero que mi función espere a que el evento reader.onLoad termine su ejecución antes de devolver el valor.
davy.ai
Para resolver este problema, puedes usar Promesas en JavaScript para hacer que la función espere la ejecución de reader.onLoad antes de devolver un valor.
Así es como puedes modificar el código para devolver una Promesa:
Ahora puedes llamar a esta función con async/await o .then() para esperar a que la Promesa se resuelva antes de obtener el valor de isCorrupt.
“`javascript
async function checkImage(file) {
const isCorrupt = await isImageCorrupt(file);
console.log(isCorrupt);
}
// O
isImageCorrupt(file).then((isCorrupt) => {
console.log(isCorrupt);
});
“`