如何用PokeAPI和JavaScript发起6次无重复API请求生成宝可梦队伍？

要生成6只不重复的宝可梦队伍，你需要解决两个核心问题：生成不重复的随机宝可梦ID，以及批量请求并展示多只宝可梦的信息。以下是修改后的完整实现：

调整HTML结构 #

首先需要添加一个容器来存放6只宝可梦的卡片：

<div class="pokemon-team"></div>
<button class="button">生成队伍</button>

修改JavaScript代码 #

const teamContainer = document.querySelector(".pokemon-team");
const button = document.querySelector(".button");

button.addEventListener('click', async (e) => {
  e.preventDefault();
  teamContainer.innerHTML = ''; // 清空之前的队伍内容
  const pokemonIds = getUniqueRandomNumbers(6, 905);
  
  // 逐个请求并渲染宝可梦
  for (const id of pokemonIds) {
    try {
      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`);
      const pokemon = await response.json();
      
      // 创建单只宝可梦的卡片元素
      const pokemonCard = document.createElement('div');
      pokemonCard.classList.add('pokemon-card');
      pokemonCard.innerHTML = `
        <h3>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h3>
        <img src="${pokemon.sprites.front_default}" alt="${pokemon.name}">
        <p>身高: ${pokemon.height}</p>
        <p>体重: ${pokemon.weight}</p>
      `;
      teamContainer.appendChild(pokemonCard);
    } catch (error) {
      console.error(`获取ID为${id}的宝可梦失败:`, error);
    }
  }
});

// 生成指定数量的不重复随机数（范围1到max）
function getUniqueRandomNumbers(count, max) {
  const uniqueNumbers = new Set();
  // 循环直到凑够指定数量的不重复数字
  while (uniqueNumbers.size < count) {
    // 生成1到max之间的整数，避免出现0（宝可梦ID从1开始）
    const num = Math.floor(Math.random() * max) + 1;
    uniqueNumbers.add(num);
  }
  return Array.from(uniqueNumbers);
}

关键细节说明 #

• 不重复随机ID生成：使用Set数据结构自动去重，循环生成随机数直到集合中有6个不重复的ID，确保每只宝可梦唯一。
• 异步请求处理：用async/await替代链式then，让异步代码逻辑更清晰，便于逐个处理请求和渲染。
• 动态DOM渲染：每次点击按钮先清空容器，然后为每只宝可梦创建独立的卡片元素，批量添加到容器中，实现多只宝可梦的展示。
• ID范围修正：将原代码的Math.ceil(Math.random() * 905)改为Math.floor(Math.random() * 905) + 1，确保生成的ID始终在1-905之间（宝可梦ID从1开始，避免出现无效的0）。

你可以根据需要为.pokemon-card添加CSS样式，让队伍展示更美观。

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