React中使用GitHub API处理多可选查询参数的技术问询

没问题，这就给你把这个GitHub仓库搜索的参数处理逻辑补全！GitHub的搜索API对多条件查询有特定的格式要求，咱们可以通过动态构建查询条件的方式，完美支持三个维度的任意组合搜索。

const root = 'https://api.github.com/search/repositories?q=';

export const githubSearch = async (txt, starMin, license) => {
  // 初始化查询条件数组，用来存放非空的搜索条件
  const queryParts = [];

  // 处理文本搜索：如果输入文本不为空，直接加入条件
  if (txt?.trim()) {
    queryParts.push(txt.trim());
  }

  // 处理最低星数：先转成数字，验证有效后加入stars范围查询条件
  const numStarMin = Number(starMin);
  if (!isNaN(numStarMin) && numStarMin >= 0) {
    queryParts.push(`stars:>=${numStarMin}`);
  }

  // 处理许可证类型：如果许可证参数不为空，加入license指定条件
  if (license?.trim()) {
    queryParts.push(`license:${license.trim()}`);
  }

  // 处理无任何查询条件的情况（可根据业务需求调整）
  if (queryParts.length === 0) {
    return Promise.resolve({ items: [] });
  }

  // 拼接完整的查询URL，多个条件用+连接（GitHub API要求的格式）
  const queryString = queryParts.join('+');
  const url = `${root}${queryString}`;

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败！状态码: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('仓库搜索出错:', error);
    throw error; // 将错误抛出，让调用方自行处理
  }
};

关键逻辑说明 #

• 文本搜索：直接将用户输入的非空文本加入条件数组，GitHub会自动匹配仓库名称、描述等字段包含该文本的仓库。
• 最低星数：先把输入的starMin转成数字，验证是有效数字且大于等于0后，使用GitHub API指定的stars:>=${numStarMin}格式构建条件。
• 许可证类型：当用户选择了许可证类型（比如mit、apache-2.0），用license:${license}格式构建条件，注意参数要使用GitHub官方的许可证slug。
• 条件组合：用join('+')把所有非空条件拼接，确保多个条件同时生效（逻辑与关系）。
• 错误处理：使用async/await结合try/catch处理网络异常，同时检查响应状态码，保证请求可靠性。

使用示例 #

// 仅搜索名称包含react的仓库
githubSearch('react', '', '')
  .then(data => console.log(data.items))
  .catch(err => console.error(err));

// 搜索星数≥1000且使用MIT许可证的仓库
githubSearch('', 1000, 'mit')
  .then(data => console.log(data.items))
  .catch(err => console.error(err));

// 三条件组合：名称包含vue，星数≥500，许可证为apache-2.0
githubSearch('vue', 500, 'apache-2.0')
  .then(data => console.log(data.items))
  .catch(err => console.error(err));

这样的实现完全支持三个条件的任意组合，不管用户选择哪几个维度，都能生成符合GitHub API要求的查询字符串～

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