使用GitHub API获取用户信息时返回undefined的问题排查

问题描述 #

开发调用GitHub API的Web应用时，通过用户名搜索用户信息，所有字段（name、头像、bio等）均显示undefined。附上HTML和JavaScript代码请求排查：

原HTML代码 #

<html>
    <head>
        <title>Github Profile!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
<body>
        <form id="form">
            <input type="text"
            id="search"
            placeholder="Search a User Here" />
        </form>
        <main id="main"></main>
        <script src="script.js" defer></script>
</body>
</html>

原JavaScript代码 #

const APIURL = 'https://api.github.com/users';

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

async function getUser(user) {
    const resp = await fetch(APIURL + user );
    const respData = await resp.json();

    createUserCard(respData);
}

function createUserCard(user) {
    const cardHTML = `
        <div class="card">
            <div>
                <img src="${user.avatar_url}"
                alt="${user.name}" />
            </div>
            <div>
                <h2>${user.name}</h2>
                <p>${user.bio}</p>

                <ul>
                    <li>${user.followers}</li>
                    <li>${user.following}</li>
                    <li>${user.public_repos}</li>
                </ul>
            </div>
        </div>
    `;

    main.innerHTML = cardHTML;
}

form.addEventListener('submit', (e) => {
    e.preventDefault();

    const user = search.value;

    if (user) {
        getUser(user);

        search.value = "";
    }
});

问题排查与解决 #

核心错误 #

1. API URL拼接错误：APIURL + user会生成无斜杠的错误URL（如https://api.github.com/usersoctocat），请求返回的不是有效用户数据，导致所有字段undefined。
2. 无错误处理机制：请求失败（如用户不存在）时，直接渲染无效数据，引发undefined。
3. 空字段未处理：部分用户可能未设置name、bio等字段，直接渲染会显示undefined。

修正后的JavaScript代码 #

const APIURL = 'https://api.github.com/users/'; // 末尾添加斜杠，确保URL拼接正确

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

async function getUser(user) {
    try {
        const resp = await fetch(APIURL + user);
        if (!resp.ok) {
            throw new Error('用户不存在或请求失败');
        }
        const respData = await resp.json();
        createUserCard(respData);
    } catch (err) {
        // 渲染错误提示
        main.innerHTML = `<h3 style="text-align:center;">${err.message}</h3>`;
    }
}

function createUserCard(user) {
    // 为空字段设置默认值，避免显示undefined
    const userName = user.name || user.login;
    const userBio = user.bio || '暂无个人简介';
    
    const cardHTML = `
        <div class="card">
            <div>
                <img src="${user.avatar_url}" alt="${userName}" />
            </div>
            <div>
                <h2>${userName}</h2>
                <p>${userBio}</p>
                <ul>
                    <li>${user.followers} 关注者</li>
                    <li>${user.following} 关注中</li>
                    <li>${user.public_repos} 公开仓库</li>
                </ul>
            </div>
        </div>
    `;

    main.innerHTML = cardHTML;
}

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const user = search.value.trim(); // 去除输入的首尾空格，避免无效请求

    if (user) {
        getUser(user);
        search.value = "";
    }
});

关键优化点 #

• 给APIURL末尾添加斜杠，保证请求URL格式正确。
• 加入try/catch和响应状态检查，处理请求失败场景，给出友好提示。
• 对可能为空的字段设置默认值，提升页面体验。
• 搜索值添加trim()，过滤空格输入。

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