React JS中如何从GitHub仓库拉取多个文件夹下的原始md文件

方案1：已知文件夹/文件命名规则（适配你给出的示例结构） #

如果你的仓库md文件路径符合folder{N}/text{N}.md的固定规律，可以直接批量构造请求地址，用Promise.all并发拉取所有内容：

// 配置基础参数，替换为你自己的仓库信息
const GITHUB_CONFIG = {
  owner: 'user-name',
  repo: 'repo-name',
  branch: 'master',
  // 你需要拉取的文件数量，按实际情况调整
  fileCount: 3
}

let fetchAllMdFiles = async () => {
  // 批量构造所有md文件的请求
  const requestList = Array.from({length: GITHUB_CONFIG.fileCount}, (_, i) => {
    const index = i + 1
    return axios.get(`https://raw.githubusercontent.com/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/${GITHUB_CONFIG.branch}/folder${index}/text${index}.md`)
  })
  try {
    // 并发请求所有文件
    const responses = await Promise.all(requestList)
    // 所有md文件内容按顺序保存在数组里，可直接用于后续表格渲染
    const mdContents = responses.map(res => res.data)
    console.log('所有md文件内容：', mdContents)
    return mdContents
  } catch (error) {
    console.error('拉取文件失败：', error)
  }
}

方案2：文件夹/文件名不固定，动态遍历仓库所有md文件 #

如果路径规则不固定，可以先调用GitHub官方的仓库树接口拉取全量文件列表，过滤出所有.md文件后再批量拉取内容：

const GITHUB_CONFIG = {
  owner: 'user-name',
  repo: 'repo-name',
  branch: 'master',
  // 如果请求频次高可以填GitHub个人访问token，避免速率限制，非必填
  // token: 'your-github-token'
}

let fetchAllMdFiles = async () => {
  try {
    // 1. 递归拉取仓库全量文件列表
    const treeRes = await axios.get(`https://api.github.com/repos/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/git/trees/${GITHUB_CONFIG.branch}?recursive=1`, {
      // 有token就加，没有可以删掉headers配置
      headers: GITHUB_CONFIG.token ? {Authorization: `token ${GITHUB_CONFIG.token}`} : {}
    })
    // 2. 过滤出所有后缀为.md的文件
    const mdFilePaths = treeRes.data.tree
      .filter(item => item.type === 'blob' && item.path.endsWith('.md'))
      .map(item => item.path)
    // 3. 批量拉取所有md文件内容
    const mdRequests = mdFilePaths.map(path => 
      axios.get(`https://raw.githubusercontent.com/${GITHUB_CONFIG.owner}/${GITHUB_CONFIG.repo}/${GITHUB_CONFIG.branch}/${path}`)
    )
    const mdResponses = await Promise.all(mdRequests)
    const mdContents = mdResponses.map((res, index) => ({
      path: mdFilePaths[index],
      content: res.data
    }))
    console.log('所有md文件信息：', mdContents)
    return mdContents
  } catch (error) {
    console.error('操作失败：', error)
  }
}

注意事项 #

• 未配置GitHub Token调用公开仓库接口时，单IP每小时最多请求60次，小仓库文件量少的场景足够使用
• 拉取到的所有md内容会按顺序存储在数组中，你可以直接遍历该数组渲染表格

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