如何使用JS获取GitHub仓库指定文件夹的文件并生成数组

前置要求 #

• 目标GitHub仓库为公开仓库，私有仓库需要额外配置GitHub Personal Access Token，本方案以公开仓库场景实现

接口说明 #

调用GitHub官方Contents API即可获取指定路径下的文件列表，原生JS无额外依赖，请求格式如下：
https://api.github.com/repos/[仓库所有者用户名]/[仓库名]/contents/[目标文件夹路径]?ref=[分支名]
参数说明：

• 仓库所有者用户名：你GitHub账号的用户名
• 仓库名：存放MIDI文件的仓库名称
• 目标文件夹路径：MIDI文件在仓库里的存放路径，根目录下的midi文件夹填midi，多层路径填assets/midi这类格式即可
• 分支名：对应仓库的分支，默认一般为main或master

完整实现代码 #

// 替换为你自己的仓库对应参数
const GITHUB_CONFIG = {
  owner: '你的GitHub用户名',
  repo: '仓库名',
  midiFolderPath: 'midi',
  branch: 'main'
}

async function getMidiFileList() {
  const apiUrl = `https://api.github.com/repos/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/contents/${GITHUB_CONFIG.midiFolderPath}?ref=${GITHUB_CONFIG.branch}`
  try {
    const res = await fetch(apiUrl)
    if (!res.ok) throw new Error('接口请求失败')
    const allFiles = await res.json()
    // 筛选MIDI文件生成目标数组
    const midiFileArray = allFiles
      .filter(item => item.type === 'file' && /\.(mid|midi)$/i.test(item.name))
      .map(item => ({
        fileName: item.name,
        fileUrl: item.download_url,
        size: (item.size / 1024).toFixed(2)
      }))
    return midiFileArray
  } catch (err) {
    console.error('获取文件列表失败：', err)
    return []
  }
}

// 调用示例：获取列表后生成展示表格
getMidiFileList().then(list => {
  if (!list.length) return
  const tableContent = `
  <table>
    <thead><tr><th>文件名</th><th>文件大小</th><th>操作</th></tr></thead>
    <tbody>
      ${list.map(item => `
        <tr>
          <td>${item.fileName}</td>
          <td>${item.size}KB</td>
          <td><a href="${item.fileUrl}" target="_blank">下载</a></td>
        </tr>
      `).join('')}
    </tbody>
  </table>
  `
  // 插入到页面中id为midi-table的容器内，可根据自己的页面结构修改
  document.querySelector('#midi-table').innerHTML = tableContent
})

注意事项 #

• 未认证的GitHub API请求每小时限流60次，个人小站点足够使用，高流量场景可在请求头中携带Personal Access Token提升限流阈值
• 可根据实际需求修改filter的判断规则，适配不同的文件筛选逻辑
• 返回的download_url是MIDI文件的可直接访问直链，可直接用于在线播放、下载等业务场景

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