如何在 JavaScript 中使用 Fetch 优化 GitHub 项目筛选

使用 JavaScript Fetch 优化 GitHub 项目筛选

在构建个人网站或作品集时，展示所有项目并通过 GitHub API 创建过滤器是一个常见任务。本文将深入探讨如何解决以下问题：

问题陈述

• 从 GitHub API 获取项目信息
• 获取每个项目的 "built-with.json" 文件
• 返回一个包含项目的新数组，其中 "filters" 键的值是 "built-with.json" 中的数组

解决方法

1. 获取 GitHub API 项目

使用 fetch() 函数从 GitHub API 获取项目列表：

fetch("https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created")
  .then((response) => response.json())
  .then((data) => { ... });

2. 获取 "built-with.json" 文件

对于每个项目，使用另一个 fetch() 调用获取 "built-with.json" 文件：

data.map(item => {
  fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`)
    .then((data) => { ... });

3. 处理 "built-with.json" 文件响应

解析 "built-with.json" 文件响应并将其添加到项目对象中：

.then(response => response.json())
.then(data => {
  item["filters"] = data;
  return item;

4. 返回包含过滤器的项目数组

将所有项目对象映射到一个新数组中，该数组包含 "filters" 键：

.then(data => console.log(data));

错误排查

TypeError：Failed to execute 'append' on 'FormData'

如果你遇到这个错误，可能是因为在等待 "built-with.json" 文件响应解析之前，将响应直接返回为项目对象。

修正

将 "built-with.json" 文件响应转换为 JSON，然后将其添加到项目对象中：

.then(response => response.json())
.then(data => {
  item["filters"] = data;
  return item;

完整代码

const url = "https://api.github.com/users/RodrigoWebDev/repos?per_page=100&sort=created";
fetch(url)
  .then((response) => response.json())
  .then((data) => {
    return data.map(item => {
      fetch(`https://raw.githubusercontent.com/${item.full_name}/master/built-with.json`)
        .then(response => response.json())
        .then(data => {
          item["filters"] = data;
          return item;
        });
    });
  })
  .then(data => console.log(data));

结论

通过使用 JavaScript fetch() 函数，我们可以从 GitHub API 获取项目信息，获取 "built-with.json" 文件，并返回一个包含 "filters" 键的新项目数组。

常见问题解答

1. 为什么要使用 "built-with.json" 文件？
   它允许你存储项目中使用的技术，以便更轻松地过滤和显示项目。

2. 为什么需要从 GitHub API 获取项目？
   因为 "built-with.json" 文件存储在 GitHub 存储库中，所以我们需要使用 GitHub API 来检索它。

3. 如何处理 GitHub API 的速率限制？
   GitHub API 对请求次数有限制，因此最好实施指数退避或限制每秒请求次数。

4. 是否可以将此方法用于其他平台？
   是的，只要平台提供 API 来获取项目信息和文件。

5. 如何提高性能？
   使用缓存和并行请求来获取项目和 "built-with.json" 文件可以提高性能。