如何使用JavaScript获取多个URL并提前验证URL有效性？Promise.all处理失效URL的方案及替代方法

这是批量请求里超常见的痛点——总有那么一两个接口不给力，咱们一步步来解决你的问题：

1. 让Promise.all跳过失败的请求 #

Promise.all的特性是只要有一个Promise拒绝，整个就会直接拒绝，所以要让它“容忍”失败，得给每个请求的Promise加个catch，让失败的请求返回一个可识别的标记（比如null），之后再过滤掉无效结果：

const urls = [instagramURL, facebookURL];
const thepromises = urls.map((url) => 
  fetch(url)
    .then(resp => {
      // 别忘了先检查HTTP状态码！4xx/5xx也要算失败
      if (!resp.ok) throw new Error(`请求失败：${resp.status}`);
      return resp.json();
    })
    .catch(err => {
      console.warn(`获取 ${url} 失败：`, err);
      return null; // 用null标记失败的请求
    })
);

Promise.all(thepromises).then(allPosts => {
  // 过滤掉所有失败的项
  const successfulPosts = allPosts.filter(post => post !== null);
  console.log('成功获取的内容：', successfulPosts);
});

2. 其他多URL获取的替代方法 #

方法一：Promise.allSettled（最省心的容错方案） #

ES2020引入的Promise.allSettled会等待所有请求完成（不管成功失败），返回每个请求的结果对象（包含status和value/reason），直接过滤成功项就行，不用给每个Promise加catch：

Promise.allSettled(thepromises).then(results => {
  const successfulPosts = results
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
  console.log('成功获取的内容：', successfulPosts);
});

方法二：async/await循环（更灵活的控制） #

如果需要做更复杂的逻辑（比如控制并发数、逐个处理结果），可以用for...of结合async/await：

async function fetchAllUrls(urls) {
  const successfulPosts = [];
  for (const url of urls) {
    try {
      const resp = await fetch(url);
      if (!resp.ok) throw new Error(`请求失败：${resp.status}`);
      const data = await resp.json();
      successfulPosts.push(data);
    } catch (err) {
      console.warn(`获取 ${url} 失败：`, err);
    }
  }
  return successfulPosts;
}

// 使用方法
fetchAllUrls(urls).then(posts => {
  console.log('成功获取的内容：', posts);
});

方法三：Promise.any（只取第一个成功的结果） #

如果你的场景是“只要有一个请求成功就行”，可以用Promise.any——它会等待第一个成功的Promise，忽略所有失败项：

Promise.any(thepromises).then(firstSuccessfulPost => {
  console.log('第一个成功获取的内容：', firstSuccessfulPost);
});

3. 提前验证URL是否可用 #

完全提前保证URL可用很难（网络状态随时变），但可以做一些基础检查来减少无效请求：

步骤一：格式合法性验证 #

用原生URL构造函数检查URL格式是否正确：

function isValidUrl(url) {
  try {
    new URL(url);
    return true;
  } catch (err) {
    console.warn(`URL格式错误：${url}`);
    return false;
  }
}

// 先过滤格式无效的URL
const validUrls = urls.filter(url => isValidUrl(url));

步骤二：提前发送HEAD请求（轻量级可用性检查） #

HEAD请求只获取响应头，不下载正文，比GET请求更高效，可以用来提前判断服务器是否能正常响应：

async function isUrlReachable(url) {
  try {
    const resp = await fetch(url, { method: 'HEAD' });
    return resp.ok; // 2xx状态码视为可用
  } catch (err) {
    return false;
  }
}

// 批量验证可用性后再发起请求
async function fetchOnlyReachableUrls(urls) {
  // 先检查所有URL是否可达
  const reachableChecks = await Promise.all(
    urls.map(url => isUrlReachable(url).then(isReachable => ({ url, isReachable })))
  );
  const reachableUrls = reachableChecks.filter(item => item.isReachable).map(item => item.url);
  
  // 再获取可达URL的内容
  const results = await Promise.all(
    reachableUrls.map(url => fetch(url).then(resp => resp.json()))
  );
  return results;
}

// 使用方法
fetchOnlyReachableUrls(urls).then(posts => {
  console.log('从可用URL获取的内容：', posts);
});

⚠️ 注意：有些服务器可能会拒绝HEAD请求，所以这种方法不是100%可靠，最好还是结合请求时的错误处理一起用。

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