Fetch y await
El método fetch()
El método fetch de la nueva API fetch busca y trae recursos como datos, imágenes etc. . . de otros archivos ( fetch significa ir a buscar algo, traer algo ).
Un ejemplo básico: utilizar la función fetch para traer una imagen .jpg y mostrarla en pantalla.
// la función fetch toma un solo argumento: la ruta hacia la imagen fetch('imagen.jpg') //una vez llamada la función fetch tenemos que esperar una respuesta, y la respuesta es parte de una promesa. // si hay una respuesta devuélvemela en forma de (texto o en forma de json, o en forma de) blob... .then(respuesta =>{ return respuesta.blob(); }) // de nuevo necesitamos esperar el blob y cuando lo tenemos .then(respuesta2=>{ // utilizamos el método URL.createObjectURL() para crear una cadena de texto que puede ser utilizada como valor del atributo src de una imagen fetchTest.src = URL.createObjectURL(respuesta2) }) // pero si hay algún error atrápalo (catch) .catch(error =>{console.error(error)})
Vea este ejemplo en codepen:
See the Pen fetch by Gabi (@enxaneta) on CodePen.
La palabra clave await
Podemos hacer lo mismo utilizando la palabra clave async. En este caso el codigo es más conciso y presuntamente más facil de leer
La palabra clave await puede ser utilizada solamente en funciones asíncronas, Empleamos la palabra clave async para especificar que una función se ejecuta de manera asíncrona.
Primero necesitamos crear una función asíncrona
async function funcionAsincrona(url){
// espera (await) una respuesta de fetch()
const respuesta = await fetch(url);
// espera (await) el blob
const respuesta2= await response.blob();
// y cuando lo tenga crea un nuevo objeto url y utilízalo como valor del atributo src de la imagen
fetchTest.src = URL.createObjectURL(blob)
}A continuación podemos llamar la funcionAsincrona()
//Pero en el caso en el cual hay un error atrápalo con catch
funcionAsincrona().catch(error =>{console.error(error)})Vea este ejemplo en codepen:
See the Pen async await by Gabi (@enxaneta) on CodePen.