Estoy creando un sitio de noticias a través de newsapi.org api y estoy usando async await para obtener los datos de la API, pero el pie de página html se está ejecutando antes de la solicitud de espera async. ¿Cómo puedo hacer que mi pie de página espere a que se obtenga la solicitud y luego se muestre en la parte inferior de la pantalla?
gracias de antemano
function displayArticles(articles) { let displayedArticles = articles.map((article) => { const { title, description, url, urlToImage } = article; return `<article class="article"> <div class="article-img"> <img src="${ !urlToImage || urlToImage.includes("muhtwaplus") || urlToImage.includes("aljazeera.net") ? "./img/No-Image-Available.jpg" : urlToImage }" alt= ${title}/> </div> <div class="article-heading"> <h2 class="article-title">${title}</h2> <p class="article-description">${description ?? ""}</p> </div> <a class="article-link" target="_blank" href="${url}">قراءة المزيد</a> </article>`; }); displayedArticles = displayedArticles.join(""); document.querySelector(".main").innerHTML = displayedArticles; } async function createArticle( category = "", apiLink = "https://newsapi.org/v2/top-headlines?country=eg" ) { const apiKey = "&apiKey=3bd4753c68144c04b3eb73e44b7da657"; document.querySelector(".main").textContent = ""; const response = await fetch(apiLink + category + apiKey); const responseText = await response.json(); const articles = responseText.articles; if (articles.length === 0) document.querySelector(".main").innerHTML = "No data Found"; else { displayArticles(articles); } } document.addEventListener("DOMContentLoaded", function () { createArticle(); }); <body> <main class="main"></main> <footer> <p class="footer-paragraph"> Made with ❤️ in <span class="year">2021</span> by Mahmoud Abdulmuty </p> </footer> <script src="index.js"></script> </body>;Antes de contarte el problema, me gustaría contarte cómo el navegador analiza HTML cuando comienza a cargarse. por lo tanto, cada vez que se carga el código HTML, comienza a analizar el código HTML línea por línea y cuando llega a recursos como img o enlaces, no esperará a que se carguen los recursos, en segundo plano, los recursos comienzan a descargarse y el código HTML se analiza continuamente hasta se completa para analizar todo el código HTML. entonces, como le dije en segundo plano, cuando los recursos completen su carga, se ejecutará al mismo tiempo cuando HTML esté ocupado analizando el código.
entonces, en el script js, se cargó de manera diferente cuando el código HTML comenzó a analizarse y cada vez que toca el script js o el código comienza a descargarse en segundo plano, pero el análisis del código también tiene que esperar hasta que se cargue el código js, por lo que cuando se carga js, entonces el El analizador comenzará a analizar.
Aquí está utilizando async-await para eliminar este problema, de modo que cuando su código llega al código js y cuando js ve async-await, el análisis del código no está esperando para cargarse, el analizador pasa a la siguiente línea para ejecutar y debido a async-await El código analizará el código continuamente sin ninguna espera. continuará analizando y, debido a async-await, se comportará de manera asíncrona e intentará ejecutar la siguiente línea del código porque su código js no se cargó hasta ese momento debido a esto, su parte de pie de página se ejecuta primero.
Creo que probablemente tenga que hacer cambios en su código o intente usar async antes del atributo src <script async src="index.js"</script> pero realmente no funcionará en muchos casos.
La segunda mejor opción es usar defer antes del atributo src. Si desea eliminar este tipo de problema, debe usar 'defer' antes de <script defer src="index.js"</script> y siempre coloque la etiqueta de script debajo del final de la etiqueta HTML.
Una solución simple es configurar la visualización de su pie de página en ninguno inicialmente y cuando se recibe la respuesta, configurarlo para bloquear o lo que sea. Algo como esto:
CSS
.d-none { display: none !important }HTML
<footer class="d-none"></footer>Javascript después de recibir la respuesta y hacer lo que debes hacer
document.querySellector("footer").classList.remove("d-none");