Recuerda que siempre puedes revisar la documentación de Javascript.
Incluso en la documentación de Axios hay un ejemplo de cómo usar async/await con get
.
Básicamente, para implementar async/await, debes declarar async
en tu función, de esta forma, lo que se retornará será una Promesa.
async function consumoApi() { ... }
De esta forma, podrás utilizar await
dentro de esa función, eso hará que la ejecución del código espere hasta que los datos provenientes del API estén disponibles. Cabe recalcar, que al usar await
, el resultado se retornaría de la función, pero en caso de error deberás usar try...catch.
// En caso de error, mostrará un 'Uncaught Error'
var response = await axios.get(.....);
De esta forma, tu código quedaría así (tarda un poco en obtener los resultados):
var data = [];
async function consumoApi() {
for (let i = 0; i < 5; i++) {
var response = await axios.get(`https://apirecruit-gjvkhl2c6a-uc.a.run.app/compras/2019-12-0${i + 1}`);
response.data.forEach((element) => {
data.push(element);
});
}
console.log(data)
}
consumoApi();
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>
Una mejor implementación podría ser así:
function consumoApi() {
// Nótese el uso de async en la función
return new Promise(async function(resolve, reject) {
var data = [];
try {
for (let i = 0; i < 5; i++) {
var response = await axios.get(`https://apirecruit-gjvkhl2c6a-uc.a.run.app/compras/2019-12-0${i + 1}`);
data.push(...response.data);
}
resolve(data); // Resolvemos la promesa enviando los datos
} catch(error) {
reject(error); // Rechazamos la promesa en caso de error
}
});
}
// Llamaremos nuestra función, utilizando la forma de Promesa
consumoApi()
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>