¿Cómo convertir esta devolución de llamada en una promesa usando async/await?
La siguiente función toma una imagen de una URL, la carga y devuelve su ancho y alto:
function getImageData (url) {
const img = new Image()
img.addEventListener('load', function () {
return { width: this.naturalWidth, height: this.naturalHeight }
})
img.src = url
}
El problema es que si hago algo como esto:
ready () {
console.log(getImageData(this.url))
}
Lo entiendo undefinedporque la función se ejecuta pero la imagen aún no se ha cargado.
¿Cómo usar await/async para devolver el valor solo cuando la foto se ha cargado y el ancho y el alto ya están disponibles?
Aceptado
¿Cómo usar
async/awaitpara convertir esta función de devolución de llamada en una promesa?
No lo haces. Como de costumbre, utilizas el new Promiseconstructor . No hay azúcar sintáctica para eso.
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener('load', () => resolve(img));
img.addEventListener('error', reject); // don't forget this one
img.src = url;
});
}
¿Cómo usar
await/asyncpara registrar el valor solo cuando la foto se ha cargado y el ancho y el alto ya están disponibles?
Tu puedes hacer
async function getImageData(url) {
const img = await loadImage(url);
return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
console.log(await getImageData(this.url))
}
