如何将SWAPI拉取的数据作为参数传入_render方法实现星球卡片渲染

实现思路 #

你已经成功拉取到全量星球数据，只需要遍历planetData数组中的每一项，取出对应字段传入_render方法生成卡片DOM，再插入到页面容器即可，具体修改如下：

第一步：调整_load方法，整合数据拉取+批量渲染逻辑 #

把原来独立的getPlanets异步逻辑整合为类的_load方法，拿到数据后遍历渲染所有星球卡片：

async _load() {
  try {
    // 原有拉取数据逻辑
    const urls = Array.from({ length: 7 },
      (v, i) => `https://swapi.boom.dev/api/planets?page=${i + 1}`);
    const promises = urls.map(url => fetch(url)
      .then(res => res.json())
      .then(data => data.results));
    const planetData = (await Promise.all(promises)).flat();
    console.log(`Results for ${planetData.length} planets downloaded...`);

    // 新增批量渲染逻辑
    const mainContainer = document.body.querySelector(".main");
    mainContainer.innerHTML = ''; // 清空原有占位内容
    // 遍历每个星球生成卡片
    planetData.forEach(planet => {
      const box = document.createElement("div");
      box.classList.add("box");
      box.innerHTML = this._render({
        name: planet.name,
        terrain: planet.terrain,
        population: planet.population,
        // 补全_render方法缺失的image参数，这里用带星球名称的seed生成不重复的占位图，可替换为自己的星球图片资源
        image: `https://picsum.photos/seed/${planet.name}/64/64`
      });
      mainContainer.appendChild(box);
    })
  } catch (err) {
    console.error('星球数据拉取失败：', err)
  }
  this.emit(Application.events.READY);
}

第二步：补全_render方法的入参 #

你现有_render方法里用到了image变量但没有在入参里声明，补充即可：

// 入参新增image字段
_render({ name, terrain, population, image }) {
  return `
<article class="media">
  <div class="media-left">
    <figure class="image is-64x64">
      <img src="${image}" alt="planet">
    </figure>
  </div>
  <div class="media-content">
    <div class="content">
      <h4>${name}</h4>
      <p>
        <span class="tag">${terrain}</span> <span class="tag">${population}</span>
        <br>
      </p>
    </div>
  </div>
</article>
  `;
}

其他说明 #

• 原有单张占位卡片的渲染逻辑可以直接删除，替换为上面的批量渲染逻辑即可
• SWAPI返回的population字段为字符串格式数字，无需额外转换可直接渲染
• 若需要对接口异常做用户友好提示，可以在catch分支里添加对应的错误提示DOM渲染逻辑

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