無法使用 fetch API 動態顯示數據

Question

我在顯示從 API 動態獲取的數據時遇到問題。 控制台日志清楚地顯示 promise 已完成並且數據已成功獲取，但數據不知何故未顯示在相關容器中。 我正在使用map的 map 方法使用模板字符串動態顯示數據。 對頁面的檢查也沒有提到代碼中的任何相關錯誤。 可能是什么問題呢？

 const url = 'https://api.github.com/users/john-smilga/followers?per_page=100' const fetchFollowers = async() => { const response = await fetch(url); const data = await response.json(); return data; } const getData = fetchFollowers(); const place = document.getElementById("container") const display = () => { let newFollowers = getData.map((item) => { const { avatar_url, login, html_url } = item; return `<article class="card"> <img src="${avatar_url}"> <h4> ${login}</h4> <a href="${html_url}" class="btn"> view profile </a> </article>`; }).join(" "); place.innerHTML = newFollowers; }

 <div id="container"></div>

Answer 1

您還沒有在任何地方調用display function 。 除此之外，您還應該使用適當的 async/await 調用fetchFollowers以等待響應，然后您可以將其用於 HTML 上的數據填充。

 const url = 'https://api.github.com/users/john-smilga/followers?per_page=100' const fetchFollowers = async () => { const response = await fetch(url); const data = await response.json(); return data; } const display = async () => { //fetch data const getData = await fetchFollowers(); const place = document.getElementById("container"); let newFollowers = getData.map((item) => { const { avatar_url, login, html_url } = item; return `<article class="card"> <img src="${avatar_url}"> <h4> ${login}</h4> <a href="${html_url}" class="btn"> view profile </a> </article>`; }).join(" "); place.innerHTML = newFollowers; } //call `display` function display();

 <div id="container"></div>

Answer 2

Hi Salman when you are calling fetch followers the function is returning promise and you are trying to iterate over a promise object instead you need to wait for the data to be fetched before iterating over it there are multiple ways to do this adding one of the methods修復您的代碼。

const url =  'https://api.github.com/users/john-smilga/followers?per_page=100'

const fetchFollowers  = async () => {
   const response = await fetch(url);
   const data = await response.json();
   return data;

}

const display = async () => {
   const getData = await fetchFollowers();
   console.log(getData);
   const place = document.getElementById("container")
   let newFollowers  = getData.map((item)=> {
    const { avatar_url, login, html_url } = item;
    return  `<article class="card">
            <img src="${avatar_url}"> 
            <h4> ${login}</h4>
            <a href="${html_url}" class="btn"> view profile </a>
     
       </article>` ;   
    

   })
   .join(" ");
   
   place.innerHTML =newFollowers;   
}
display();

您可以根據需要更新上述代碼。 希望您了解根本問題。

Answer 3

那行：

const getData =fetchFollowers();

返回 promise，但不是 promise 的結果

1. 將所有代碼包裝在異步 function 中，並且：

const getData = await fetchFollowers();

2. 使用一種 promise 語法：

fetchFollowers().then(getData=>{console.log(getData); ...other code...});