Estoy creando una aplicación simple que accede a una API y muestra información. Se activa mediante un detector de eventos en un botón, que toma el valor del campo de entrada html y lo conecta a mi función apiCall. Luego, mi código procesa la respuesta de la API y asigna los datos deseados a una variable dentro de un objeto, que luego se desconecta de la consola.
Este es mi problema: cuando hago clic en el botón por primera vez, aparece este mensaje de error:
Uncaught TypeError: Cannot read properties of undefined (reading 'average_price') at Object.getAveragePrice (index.js:17) at render (index.js:27) at HTMLButtonElement.<anonymous> (index.js:33)Luego hago clic en el botón por segunda vez y obtengo los datos correctos en mi consola. ¿Qué estoy haciendo mal? A continuación se muestra mi javascript.
let jsonResponse = "" let collectionName = "" let inputEl = document.getElementById("input-el") let buttonEl = document.getElementById("button-el") function callApi(collectionName) { fetch(`https://api.opensea.io/api/v1/collection/${collectionName}/stats`) .then(response => response.json()) .then(response => jsonResponse = response) .catch(err => console.error(err)); } const getJsonData = { getAveragePrice: function() { collectionData.averagePrice = jsonResponse.stats["average_price"] } } let collectionData = { averagePrice: "" } function render() { callApi(collectionName) getJsonData.getAveragePrice() console.log(JSON.stringify(collectionData.averagePrice)) } buttonEl.addEventListener("click", () => { collectionName = inputEl.value render() })La llamada de fetch es asíncrona. Esto significa que en su función de render , cuando callApi regresa, la solicitud aún no se ha completado. Por lo tanto, el resto del render funcionará con valores indefinidos hasta que se complete la fetch ; cuando haya hecho clic en el botón por segunda vez, la primera fetch probablemente haya finalizado, razón por la cual funciona.
En este momento el flujo de su programa es
detector de eventos -> render -> callApi -> (completar datos de respuesta)
lo que significa que la primera vez, render no tiene datos de respuesta con los que trabajar, pero al presionar el segundo botón, render tiene los datos de respuesta de la primera ejecución.
Por lo tanto, debe eliminar callApi() de render() y llamar a callApi() desde el detector de eventos en lugar de llamar a render() ; luego, cambie callApi() para que llame a render() cuando se cumpla la promesa fetch() .
El flujo del programa será entonces
detector de eventos -> callApi -> fetch -> (completar datos de respuesta) -> render