我正在通過 newsapi.org api 創建一個新聞站點，我正在使用 async await 從 API 中獲取資料，但 html 頁腳在異步等待請求之前運行。如何讓我的頁腳等待 fetch 請求，然后顯示在螢屏底部。
提前致謝
function displayArticles(articles) {
let displayedArticles = articles.map((article) => {
const { title, description, url, urlToImage } = article;
return `<article >
<div >
<img src="${
!urlToImage ||
urlToImage.includes("muhtwaplus") ||
urlToImage.includes("aljazeera.net")
? "./img/No-Image-Available.jpg"
: urlToImage
}" alt= ${title}/>
</div>
<div >
<h2 >${title}</h2>
<p >${description ?? ""}</p>
</div>
<a 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>;uj5u.com熱心網友回復：
在我告訴你這個問題之前，我想告訴你瀏覽器在開始加載時是如何決議 HTML 的。因此，無論何時加載 HTML 代碼，它都會開始逐行決議 HTML 代碼，并且當它訪問 img 或鏈接等資源時，它不會等待資源加載，在后臺資源開始自行下載，并且 HTML 代碼不斷決議直到決議整個HTML代碼就完成了。所以正如我在后臺告訴你的，當資源完成加載時，它會在 HTML 忙于決議代碼時同時執行。
所以在 js 腳本中，當開始決議 HTML 代碼時，它的加載方式不同，每當它遇到 js 腳本或代碼在后臺開始下載時，但代碼的決議也必須等到 js 代碼加載，所以當加載 js 時決議器將開始決議。
在這里你使用 async-await 來消除這個問題，所以當你的代碼命中 js 代碼并且當 js 看到 async-await 時，代碼的決議不等待加載，決議器移動到下一行執行，因為 async-await code 將連續決議代碼，無需任何等待。它將繼續進行決議，并且由于 async-await 它以異步方式運行并嘗試執行代碼的下一行，因為您的 js 代碼直到那時才加載，因此您的頁腳部分將首先執行。
我認為您可能必須對代碼進行更改或嘗試在 src 屬性之前使用 async ，<script async src="index.js"</script>但在許多情況下它確實不起作用。
第二個最好的選擇是defer在 src 屬性之前使用如果你想消除這種型別的問題，你需要在之前使用 'defer' <script defer src="index.js"</script>
并且總是把 script 標簽放在 HTML 標簽的末尾。
uj5u.com熱心網友回復：
一個簡單的解決方案是最初將頁腳顯示設定為無，并在收到回應時將其設定為阻止或其他任何內容。像這樣的東西：
CSS
.d-none { display: none !important }
HTML
<footer class="d-none"></footer>
獲得回應并執行您應該執行的操作后的 Javascript
document.querySellector("footer").classList.remove("d-none");
uj5u.com熱心網友回復：
我猜您可以嘗試將腳本放在頁腳之前。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/376145.html
標籤：javascript json 接口 异步等待