En este artículo os voy a enseñar cómo utilizar axios de forma asíncrona en vuestros proyectos.
Partiendo del siguiente código para realizar una llamada GET con axios:
axios.get("tu_url")
.then(resp=> {
alert(resp.data)
}).catch(error =>
alert(error)
);
axios.get("tu_url")
.then(resp=> {
alert(resp.data)
}).catch(error =>
alert(error)
);
axios.get("tu_url")
.then(resp=> {
alert(resp.data)
}).catch(error =>
alert(error)
);
Al utilizar la sentencia .then la APP se queda a la espera de cargar el resultado de forma síncrona.
Para cambiar la llamada a una llamada asíncrona hay que hacer la siguiente modificación:
try {
const resp = await axios.get("tu_url")
alert(resp.data)
} catch (err) {
console.log(err)
}
try {
const resp = await axios.get("tu_url")
alert(resp.data)
} catch (err) {
console.log(err)
}
try {
const resp = await axios.get("tu_url")
alert(resp.data)
} catch (err) {
console.log(err)
}
- Creamos un try/catch para ser capaces de recuperar los errores que puedan surgir al realizar la llamada.
- Creamos una constante (const) dónde se va a almacenar la respuesta de nuestro GET.
- Para ejecutar la llamada añadimos await delante de la función de axios.
- El sistema ejecutará en segundo plano la llamada await y devolverá la respuesta a la constante creada. Para ver el resultado añadimos un alert de ejemplo resp.data contendrá los datos del servidor REST.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.
0