Tengo un proyecto personal next.js en el que estoy trabajando y el componente en el que estoy trabajando tiene una función getstaticprops donde raspará un sitio web y luego publicará los datos raspados en una base de datos en tiempo real de Firebase. El problema con el que me encuentro es que después de crear la página, tengo un código javascript que se ejecuta en el navegador que obtiene los datos agregados recientemente, pero siempre da como resultado una respuesta "nula" de la base de datos, lo que significa que la nueva entrada no es allá.
Lo que noté es que si agrego un retraso antes de obtener datos de la base de datos usando setTimeout(), parece funcionar. Así que ejecuté algo como esto
setTimeout(() => {console.log(fetcher());}, 200) mientras tanto, solo ejecuta fecther() lo que resulta en una respuesta nula.
Así que me pregunto por qué sucede esto. El javascript que obtiene no se ejecuta hasta que los datos se publican en la base de datos, por lo que debería estar disponible, ¿verdad? ¿Es este un problema al final de Firebase con cierta latencia para agregar los datos a la base de datos? ¿O hay algo más que debería estar haciendo? No estoy muy contento de tener que usar la función de tiempo de espera.
Así que me pregunto por qué sucede esto. El javascript que obtiene no se ejecuta hasta que los datos se publican en la base de datos, por lo que debería estar disponible, ¿verdad?
Sí, una vez que esté en la base de datos estará disponible. Sabe que esto sucedió una vez que obtiene un retorno de 200 de su publicación a la base de datos.
¿Es este un problema al final de Firebase con cierta latencia para agregar los datos a la base de datos? Cuando te comunicas con otro sistema, siempre hay latencia. Ya sea una base de datos, una API, un disco duro, etc. ¿O hay algo más que debería estar haciendo? No estoy muy contento de tener que usar la función de tiempo de espera.
Bueno, sí. Si bien el tiempo de espera funciona, no es recomendable, legible ni confiable. Debe familiarizarse con el concepto de código asíncrono .
¿Qué es el código asíncrono? Para responder eso, primero echemos un vistazo rápido al código síncrono. Que es lo que se suele usar. Un ejemplo:
x = 5 console.log(x) // Output: 5 x = addFivetoNumber(x) console.log(x) // Output: 10Primero se ejecuta la primera línea, luego la segunda y así sucesivamente. Cuando se llama a una función, el código dentro de la función se ejecutará y el programa continúa una vez que se realiza la función.
Sepa cuando tiene una función que es asíncrona, el código continúa sin esperar a que termine la función:
x = 5 console.log(x) // Output: 5 x = asyncAddFivetoNumber(x) console.log(x) // Output: 5 ... console.log(x) // Once the function is done we get the expected value // Output: 10¿Qué pasa si necesitamos esperar esa función antes de continuar? Bueno, en ese caso, necesitamos envolver nuestro código asíncrono. Podemos usar devoluciones de llamada .
Las devoluciones de llamada esencialmente dividen su código antes de la función asíncrona y después de la función asíncrona. Cada línea de código dentro de la devolución de llamada solo se ejecutará una vez que finalice la función asíncrona:
x = 5 console.log(x) // Output: 5 asyncAddFivetoNumber(x, (result) => { x = result console.log(x) // Output: 10 } console.log(x) // Output: 5Si tenemos varias funciones asíncronas que necesitan el resultado de cada una, una podría anidar las devoluciones de llamada. Es posible, pero no se recomienda, ya que se vuelve ilegible bastante rápido. Para estos casos, recomendaría buscar promesas y async/await .