如何从GitHub API获取JSON响应？新手调用代码运行报错求助

现有代码的3个核心错误 #

• 1. 变量名不匹配：你定义的API地址变量是api_url，但fetch方法里调用的是不存在的api_repo_url，会直接抛出变量未定义的错误
• 2. 变量调用时序错误：你在const api_url声明之前就调用了getData()，const声明的变量存在暂时性死区，在声明前访问会报错
• 3. GitHub身份验证头格式错误：GitHub的API要求Authorization头的取值必须是token 你的个人访问令牌的格式，直接填TOKEN既不符合格式要求也没有替换为实际令牌

修正后的脚本代码（github.js） #

// 先声明变量再调用函数
const api_url = 'https://api.github.com/users/alisirri/repos';
// 替换为你自己的GitHub个人访问令牌
const GITHUB_TOKEN = '替换为你的实际token';

async function getData() {
    try {
        const response = await fetch(api_url, {
            headers: {
                'Authorization': `token ${GITHUB_TOKEN}`
            }
        });
        // 先判断请求是否成功
        if (!response.ok) {
            throw new Error(`请求错误：${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error('获取数据失败：', err);
    }
}

getData();

重要注意事项 #

• 绝对不要把GitHub令牌直接写在前端公开的代码中，令牌泄露会导致他人可以访问、修改你账号下的所有资源，生产环境必须把请求逻辑放在后端服务中转，前端只调用后端接口
• 如果不需要更高的API请求限额，公开的用户仓库信息可以不带令牌请求，直接删除fetch的headers配置即可正常调用，不会有跨域问题

内容的提问来源于stack exchange，提问作者Sırrı