在 React JS 中从 GitHub 中获取多个原始 md 文件

Question

我正在尝试从 Guthub 存储库的多个原始 .md 文件中获取数据。目前我只能获取一个，但我需要获取所有这些。

我有一个 github 存储库，我希望从原始 .md 文件中获取数据，这不是问题。问题是 repo 有一堆文件夹，每个文件夹都有自己的 .md 文件。我需要对所有文件夹进行某种映射并获取所有 .md 文件。

假设我有一个包含以下文件夹的 github 存储库：

folder1 -> text1.md
folder2 -> text2.md
folder3 -> text3.md

我目前只能使用以下方法获取一个原始 md

let fetchData = () => {    
axios.get("https://raw.githubusercontent.com/user-name/repo-name/master/folder1/text1.md").then(response => {
      console.log(response)
    }).catch(error => {
      console.log(error)
    })
  }

我的目标是获取所有 text1、text2、text3.md，这样我就可以映射它们并显示在 table

中

Answer 1

根据您的评论，我认为您最好的选择是创建一个节点工作程序，您可以每周运行（在部署期间）从您告诉的文件夹（文件名和内容）中抓取信息将它传递给，然后以某种方式保存该信息，您以后可以从 gatsby 使用（我想理想的方式是将它放在 gatsby GraphQL 上）。

由于我所掌握的信息太有限，所以关于那个工人可能是怎样的想法很模糊：

let repoBaseUrl = 'https://raw.githubusercontent.com/user-name/repo-name/master/';
let folders = [
  'folder1',
  'folder2',
  'folder3'
];


let fetchFileName = async (folder) => {    
  // Your function to get the filename
  return filename;
}

let fetchFileContent = async (folder, filename) => {
  try {
    const response = await axios.get(`${repoBaseUrl}${folder}${filename}`);
    return response.data;
  }
  catch(error) {
    // do something with the error
  }
}

let fetchFolderContent = async () => {
  const data = {};
  folders.forEach(async (folder) => {
    const filename = await fetchFileName(folder);
    const content = await fetchFileContent(folder, filename);
    data[folder] = {
      filename,
      content,
    } 
  });
  return data;
}

let main = async () => {
  const data = await fetchFolderContent();
  // Process your data
  // IE: save it GraphQL so you can consume it from Gatsbt
}

main();

在 React JS 中从 GitHub 中获取多个原始 md 文件

Fetching multiple raw md files from GitHub in React JS

javascript

reactjs

fetch

github-api