如何优化基于GitHub API获取仓库语言使用占比的Promise代码

核心重构思路 #

1. 用async/await替代Promise链式嵌套，让异步代码逻辑更线性直观
2. 用数组方法（filter、map、reduce）替代传统for循环，简化数据处理流程
3. 统一错误处理，避免嵌套中的遗漏
4. 拆分逻辑为单一职责的步骤，提升代码可读性和维护性

重构后的代码 #

const username = '<GH_USERNAME>'; // 替换为你的GitHub用户名
const apiUrl = `https://api.github.com/users/${username}/repos`;

async function calculateLanguageUsage() {
  try {
    // 1. 获取用户仓库列表
    const repoResponse = await fetch(apiUrl);
    if (!repoResponse.ok) throw new Error(`获取仓库列表失败: ${repoResponse.status}`);
    const repos = await repoResponse.json();

    // 2. 过滤非Fork且有语言标识的仓库
    const targetRepos = repos.filter(repo => !repo.fork && repo.language);

    // 3. 批量获取每个仓库的语言详情
    const languageResponses = await Promise.all(
      targetRepos.map(repo => fetch(repo.languages_url))
    );

    // 4. 解析所有语言响应数据，过滤成功的请求
    const languageDataList = await Promise.all(
      languageResponses
        .filter(res => res.ok)
        .map(res => res.json())
    );

    // 5. 统计所有语言的代码量总和
    const languageTotals = languageDataList.reduce((acc, langData) => {
      for (const [lang, count] of Object.entries(langData)) {
        acc[lang] = (acc[lang] || 0) + count;
      }
      return acc;
    }, {});

    // 6. 计算占比并渲染到页面
    const totalLines = Object.values(languageTotals).reduce((sum, count) => sum + count, 0);
    const resultHtml = Object.entries(languageTotals)
      .map(([lang, count]) => `${lang} ${((count / totalLines) * 100).toFixed(0)}%<br>`)
      .join('');
    
    document.body.innerHTML = resultHtml;
  } catch (error) {
    console.error('处理过程出错:', error);
    document.body.innerHTML = `出错了: ${error.message}`;
  }
}

// 执行函数
calculateLanguageUsage();

代码说明 #

• async/await：将多层Promise嵌套转化为线性代码，逻辑更清晰，避免"回调地狱"
• 数组方法优化：
  • filter快速筛选符合条件的仓库，替代手动循环判断
  • map批量生成请求Promise，简化数组构建
  • reduce高效统计语言代码量总和，替代多次循环累加
• 错误处理：集中用try/catch捕获所有异步和同步错误，避免嵌套中遗漏异常
• 渲染优化：用innerHTML替代多次document.write，减少DOM操作次数，提升性能

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