如何在页面展示API获取的免费游戏限免信息？排查代码报错

核心问题分析 #

1. Promise回调语法错误：你的.then回调未用大括号包裹，导致let games=data和DOM操作代码脱离了回调作用域，data变量在全局作用域未定义，直接触发ReferenceError。
2. API返回结构误解：该API返回的是游戏对象数组，而非包含gamesList属性的对象，所以data.gamesList是不存在的。
3. DOM操作逻辑问题：当前代码只尝试修改单个h2，无法展示多个限免游戏，且按钮功能未关联API请求。

修正后的代码 #

JavaScript（main.js） #

const fetchOptions = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': '<你的API密钥>',
        'X-RapidAPI-Host': 'gamerpower.p.rapidapi.com'
    }
};

// 绑定按钮点击事件
document.querySelector('button').addEventListener('click', () => {
    fetch('https://gamerpower.p.rapidapi.com/api/giveaways?type=game&sort-by=popularity', fetchOptions)
        .then(response => {
            // 先检查响应是否成功
            if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
            return response.json();
        })
        .then(games => {
            console.log('获取到的游戏数据：', games);
            renderGames(games);
        })
        .catch(err => console.error('请求失败：', err));
});

// 渲染游戏列表的函数
function renderGames(games) {
    // 清空原有内容
    const container = document.getElementById('games-container');
    container.innerHTML = '';

    games.forEach(game => {
        const gameCard = document.createElement('div');
        gameCard.className = 'game-card';
        
        gameCard.innerHTML = `
            <h3>${game.title}</h3>
            <img src="${game.image}" alt="${game.title}">
            <p>${game.description}</p>
            <p>截止日期：${game.end_date || '无'}</p>
        `;
        
        container.appendChild(gameCard);
    });
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="展示当前免费游戏限免信息">
    <meta name="keywords" content="免费游戏,限免,游戏领取">
    <title>Game Giveaways</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Current Game Giveaways</h1>
    <button type="button">获取限免游戏</button>
    <!-- 添加容器用于渲染游戏列表 -->
    <div id="games-container"></div>

    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

关键修正点说明 #

• Promise回调包裹：所有依赖请求返回数据的操作必须放在.then的大括号回调内部，确保变量作用域正确。
• API数据处理：直接遍历返回的数组（games），每个元素包含title、image、description等属性，对应API返回的字段。
• 按钮功能绑定：将API请求绑定到按钮点击事件，避免页面加载就发起请求。
• 添加渲染容器：用<div id="games-container">作为游戏列表的容器，动态生成每个游戏的卡片。

额外提示 #

• 替换<你的API密钥>为你在RapidAPI上获取的真实密钥，否则请求会被拒绝。
• 可以在CSS中给.game-card添加样式，比如设置卡片间距、边框、图片尺寸等，让列表更美观。

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