客户端环境下如何高效验证Google Autodraw API获取的SVG URL有效性（替代Axios请求方案）

你现在遇到的问题我太懂了——串行发送Axios请求验证URL确实会慢得让人抓狂，尤其是URL数量多的时候。毕竟浏览器一次能发的请求数有限，而且串行的话每个请求都要等前一个完成，完全浪费了并行的能力。结合你只能在客户端实现的限制，给你几个实用的优化方案：

1. 用并行请求替代串行循环 #

你当前的代码是逐个await请求，属于串行执行，这是延迟高的核心原因。换成Promise.allSettled来并行发送所有请求，就能把总耗时从“所有请求时间之和”压缩到“最慢的那个请求时间”。而且Promise.allSettled不会因为某个请求失败就中断整个流程，刚好符合你筛选有效URL的需求。

优化后的代码示例：

const validateSuggestions = async (suggestions) => {
  // 把每个URL转换成HEAD请求的Promise（后面会说为什么用HEAD）
  const requestPromises = suggestions.map(suggestion => 
    axios({
      url: suggestion.url,
      method: 'head' // 关键：用HEAD代替GET
    })
    .then(() => suggestion) // 请求成功就保留这个条目
    .catch(() => null) // 失败就返回null
  );

  // 并行等待所有请求完成
  const results = await Promise.allSettled(requestPromises);
  
  // 过滤出成功的条目，排除null和失败的结果
  return results
    .filter(result => result.status === 'fulfilled' && result.value !== null)
    .map(result => result.value);
};

2. 使用HEAD请求代替GET请求 #

你原来的代码是发送GET请求，会下载整个SVG文件，但你其实只需要确认这个URL是否存在。改用HEAD请求的话，服务器只会返回响应头，不会返回SVG的内容，能大幅减少数据传输量，让请求更快完成。

只要服务器支持HEAD请求（Google的服务一般都支持），这个优化能明显提升验证速度。

3. 给并行请求加并发限制 #

如果你的URL列表特别长（比如几十上百个），直接并行所有请求可能会触发浏览器的并发限制（大部分浏览器对同一域名最多允许6个并发请求），多余的请求会被排队，反而达不到最优速度。这时候可以做一个简单的并发控制，比如每次只同时发送5-6个请求。

自己实现一个简单的并发控制函数示例：

// 并发控制函数：每次最多limit个请求并行
const asyncPool = async (limit, array, iteratorFn) => {
  const results = [];
  const executing = [];
  
  for (const item of array) {
    // 启动当前请求
    const promise = iteratorFn(item).then(result => {
      // 请求完成后从执行队列中移除
      const index = executing.indexOf(promise);
      if (index !== -1) executing.splice(index, 1);
      return result;
    });
    
    results.push(promise);
    executing.push(promise);
    
    // 如果并发数达到限制，等待一个请求完成后再继续
    if (executing.length >= limit) {
      await Promise.race(executing);
    }
  }
  
  // 等待所有剩余请求完成
  return Promise.all(results);
};

// 使用并发控制的验证函数
const validateSuggestions = async (suggestions) => {
  const validItems = await asyncPool(6, suggestions, async (suggestion) => {
    try {
      await axios({ url: suggestion.url, method: 'head' });
      return suggestion;
    } catch (e) {
      return null;
    }
  });
  
  return validItems.filter(item => item !== null);
};

这个函数会确保同时最多有6个请求在运行，既利用了浏览器的并发能力，又不会触发限制。

总结 #

优先组合并行请求+HEAD请求，这两个优化就能解决大部分延迟问题；如果URL数量特别多，再加上并发控制，就能达到最优的验证效率啦！

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