Tengo un programa de chat que agrega un elemento al dom cuando se envía un mensaje. Este elemento se agrega correctamente, pero cuando voy a consultarlo desde el dom, se muestra como nulo. Hago una búsqueda en el servidor justo antes, pero tiene una espera para ralentizarlo. ¿Algunas ideas?
Aquí está mi código javascript
socket.on('receive_message', async function(data) { let messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); console.log('messaged_user_li: '+messaged_user_li) if (messaged_user_li == null) { console.log('if fired') await fetch('/get_messaged_user/'+data['from_user']).then((response) => { response.json().then((data2) => { loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen); }); }); console.log(data['from_user']) messaged_user_li = document.getElementById('messaged_user_li'+data['from_user']); //despite this element being added this log shows nulls which causes issues later on in the code. console.log('messaged_user_li: '+messaged_user_li) } let message_user = document.getElementById('message_user'+data['from_user']); let message_target = document.getElementById("message_target"+data['from_user']); if (messaged_user_li.classList.contains('active') == false) { messaged_user_li.classList.add('flash-message'); } if (message_user != null) { data = ` <li class="clearfix"> <div class="message-data text-right"> <span class="message-data-time">just now</span> </div> <div class="message other-message float-right">`+data['message']+`</div> </li>`; message_target.innerHTML += data; //Move scroller to bottom when message received myDiv = message_user.querySelector(".chat-history"); myDiv.scrollTop = myDiv.scrollHeight; } });Solo está esperando que se complete esta promesa:
await fetch('/get_messaged_user/'+data['from_user']).then((response) => { // ... });No este dentro de la devolución de llamada:
response.json().then((data2) => { loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen); });Es por eso que su código continúa ejecutándose e intentando obtener el elemento agregado (que aún no se ha agregado).
Para resolver esto, podría encadenar las llamadas then :
await fetch('/get_messaged_user/'+data['from_user']) .then((response) => response.json()) .then((data2) => loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen)); O use await nuevamente:
const response = await fetch('/get_messaged_user/'+data['from_user']); const data2 = await response.json(); loadMessagedUser(data2[0].id, data2[0].avatar, data2[0].username, data2[0].last_seen);