基于Axios获取并筛选符合条件的Google Fonts数据求助

我来帮你搞定这个字体筛选的逻辑问题！你的代码之前把字体对象和变体数组的处理拆得太散，导致逻辑绕来绕去没达到预期效果。我重新梳理了需求，给你改好了完整的代码，完全满足你提出的三个条件：

axios.get(`https://www.googleapis.com/webfonts/v1/webfonts?sort=alpha&key=${GOOGLE_API_KEY}`)
  .then(({ data }) => {
    // 一次性筛选出符合所有要求的字体对象
    const filteredFonts = data.items.filter(item => {
      // 条件1：过滤掉所有包含"italic"的变体（不管是单独italic还是带权重的italic）
      const nonItalicVariants = item.variants.filter(variant => !variant.includes('italic'));
      
      // 条件2：必须包含"regular"变体
      const hasRegular = nonItalicVariants.includes('regular');
      if (!hasRegular) return false;
      
      // 条件3："regular"前后至少各有一个变体
      const regularIndex = nonItalicVariants.indexOf('regular');
      const hasVariantBefore = regularIndex > 0;
      const hasVariantAfter = regularIndex < nonItalicVariants.length - 1;
      
      return hasVariantBefore && hasVariantAfter;
    });

    // 把符合条件的完整字体对象更新到state
    this.setState({ googleFonts: filteredFonts, loading: false });
  })
  .catch((err) => {
    if (!axios.isCancel(err)) {
      this.setState({ error: registerError(err.message), loading: false });
    }
  });

代码逻辑说明 #

我把所有筛选逻辑整合到了一个filter方法里，每一步都对应你的需求：

1. 移除Italic变体：用!variant.includes('italic')直接排除所有带italic的变体，不管是单独的italic还是300italic这种带权重的
2. 校验regular存在：先确认处理后的变体数组里有regular，没有的直接跳过这个字体
3. 校验regular前后变体：找到regular的索引，确保它既不是数组第一个元素（regularIndex > 0），也不是最后一个元素（regularIndex < 数组长度-1），这样就保证了前后至少各有一个变体

对比你原来的代码，这个版本逻辑更清晰，不会把字体对象和变体数组拆分开处理，最后返回的是包含category、family等所有原字段的完整字体对象数组，直接就能更新到state里用。

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