使用Fetch API获取数据后无法动态显示的问题求助

核心问题1：错误操作Promise对象 #

const getData = fetchFollowers(); 中，fetchFollowers是异步函数，它的返回值是Promise对象，而非你需要的数组数据。后续调用getData.map()时，本质是在Promise对象上调用数组的map方法——Promise没有这个方法，这直接导致渲染逻辑失效（控制台大概率有相关报错，可能被你忽略）。

核心问题2：未触发渲染函数 #

你定义了display函数，但全程没有调用它，即便数据处理正确，也不会触发页面渲染。

次要潜在问题：DOM加载顺序 #

如果JS代码写在HTML结构之前，执行document.getElementById("container")时，容器元素还未被浏览器解析，会返回null，后续赋值innerHTML的操作自然无效。

修正后的代码示例 #

JavaScript部分

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 init = async () => {
  const place = document.getElementById("container");
  // 提前判断DOM元素是否存在
  if (!place) return;
  
  // 等待Promise完成，拿到真实数组数据
  const getData = await fetchFollowers();
  let newFollowers = getData.map((item) => {
      const { avatar_url, login, html_url } = item;
      return `<article class="card">
            <img src="${avatar_url}" alt="${login}"> 
            <h4>${login}</h4>
            <a href="${html_url}" class="btn">查看个人主页</a>
       </article>`;
    }).join("");

  place.innerHTML = newFollowers;
}

// 确保DOM加载完成后再执行初始化逻辑
document.addEventListener('DOMContentLoaded', init);

HTML部分

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

关键修正说明 #

• 用async/await等待fetchFollowers的Promise完成，拿到真实数组后再调用map
• 新增init函数封装逻辑，避免全局变量混乱
• 监听DOMContentLoaded事件，确保DOM元素加载完成后执行JS
• 给图片添加alt属性，提升页面可访问性

内容的提问来源于stack exchange，提问作者Salman Shahid