构建健壮的Web抓取：JavaScript fetch请求的重试策略-js教程-PHP中文网

构建健壮的Web抓取：JavaScript fetch请求的重试策略

霞舞

发布： 2025-11-10 19:34:11

原创

221人浏览过

构建健壮的Web抓取：JavaScript fetch请求的重试策略

在进行批量网络请求，特别是循环抓取网页内容时，网络不稳定或瞬时故障可能导致 `fetch` 请求失败并中断整个流程。本文将详细介绍如何通过实现一个异步重试机制来增强 `fetch` 操作的健壮性，确保即使在遇到临时网络问题时也能自动重试，从而提高数据获取的成功率和程序的稳定性。

在现代Web应用开发中，尤其是在进行数据抓取、API调用或批量资源加载等场景下，我们常常需要在一个循环中发起大量的网络请求。例如，遍历一个 NodeList 并逐一 fetch 其 href 属性指向的页面内容。然而，fetch API本身是基于Promise的，当网络出现瞬时中断、服务器响应延迟或返回非2xx状态码时，Promise会进入 rejected 状态，导致后续代码无法执行，整个循环流程也可能因此中断。这种脆弱性在处理大量请求时尤为明显，一次小小的网络波动就可能影响整个任务的完成。

为了提升这类操作的鲁棒性，一种行之有效的方法是引入重试机制。当一个网络请求失败时，程序不立即报错，而是尝试在一定次数内重新发起请求，直到成功或达到最大重试次数。这可以有效应对临时的网络抖动或服务器短暂的不可用。

实现 fetchWithRetry 函数

我们可以封装一个异步函数 fetchWithRetry，它接收目标URL和最大重试次数作为参数。该函数的核心在于使用 try...catch 块来捕获 fetch 操作可能抛出的错误，并在捕获到错误时根据剩余重试次数决定是否递归调用自身。

async function fetchWithRetry(url, numberOfRetries) {
  try {
    const response = await fetch(url);
    // 检查HTTP状态码，例如非2xx状态码也视为失败
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    console.log(`Successfully parsed: ${url}`); // 使用console.log代替alert，更适合教程和实际开发
    return doc;
  } catch (error) {
    if (numberOfRetries > 0) {
      console.error(`Error fetching ${url}. Retrying... (${numberOfRetries} retries left)`, error);
      // 可以在这里添加一个延迟，避免立即重试导致服务器压力过大
      // await new Promise(resolve => setTimeout(resolve, 1000)); // 例如，延迟1秒
      return fetchWithRetry(url, numberOfRetries - 1);
    } else {
      console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
      throw error; // 达到最大重试次数后，向上抛出错误
    }
  }
}

登录后复制

函数说明：

立即学习“Java免费学习笔记（深入）”；

url: 目标网页的URL字符串。
numberOfRetries: 允许的最大重试次数。每次重试成功，此值减1。
try 块: 尝试执行 fetch 请求并解析HTML。为了更健壮，我们额外检查了 response.ok 属性，确保HTTP状态码是成功的（2xx范围）。
catch 块: 捕获 fetch 操作中发生的任何网络错误或解析错误。
- 如果 numberOfRetries > 0，则说明还有重试机会，函数会打印错误信息并递归调用自身，将 numberOfRetries 减1。
- 如果 numberOfRetries 已经为0，则表示已达到最大重试次数，此时不再重试，而是抛出原始错误，让上层调用者处理。
日志输出: 使用 console.log 和 console.error 代替 alert，这在实际开发中更专业且不会阻塞UI。
延迟重试（可选）: 在实际应用中，为了避免因频繁重试给服务器带来过大压力，或者给服务器一个恢复的时间，可以在重试前添加一个短暂的延迟，例如使用 await new Promise(resolve => setTimeout(resolve, delayTime))。

在循环中集成重试机制

现在，我们可以将原始代码中的 fetch 调用替换为 fetchWithRetry。

async function processNodes(nodeList) {
  for (const el of nodeList) {
    const url = el.getAttribute('href');
    try {
      const doc = await fetchWithRetry(url, 3); // 设置最大重试次数为3
      // 在这里处理成功解析的文档对象 doc
      // 例如：
      // const title = doc.querySelector('title')?.textContent;
      // console.log(`Processed ${url}, Title: ${title}`);
    } catch (error) {
      console.error(`Failed to process ${url} after multiple retries.`, error);
      // 可以选择跳过当前节点，或记录失败的URL以便后续处理
    }
  }
  console.log('All nodes processed (or attempted).');
}

// 示例调用 (假设 NodeList 是一个可迭代对象，例如 document.querySelectorAll 返回的)
// const myNodeList = document.querySelectorAll('a.some-link');
// processNodes(myNodeList);

登录后复制

通过这种方式，即使某个URL的请求失败，重试机制也会尝试挽回，从而避免整个循环因单点故障而中断。外层循环中的 try...catch 块可以进一步捕获 fetchWithRetry 最终抛出的错误，使得我们可以对那些即使重试也无法成功的请求进行统一处理。

注意事项与最佳实践

重试次数的设定: 合理设置 numberOfRetries。过多的重试可能导致不必要的延迟和资源消耗，甚至可能触发服务器的限流机制；过少则可能无法有效应对瞬时故障。通常3-5次是一个不错的起点。

白瓜面试
白瓜面试 - AI面试助手,辅助笔试面试神器

40

查看详情

指数退避（Exponential Backoff）: 为了避免在短时间内对服务器造成过大压力，并给服务器更长的恢复时间，建议在每次重试之间引入递增的延迟。例如，第一次重试等待1秒，第二次等待2秒，第三次等待4秒。

async function fetchWithExponentialBackoff(url, numberOfRetries, delay = 1000) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    console.log(`Successfully parsed: ${url}`);
    return doc;
  } catch (error) {
    if (numberOfRetries > 0) {
      console.error(`Error fetching ${url}. Retrying in ${delay / 1000}s... (${numberOfRetries} retries left)`, error);
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchWithExponentialBackoff(url, numberOfRetries - 1, delay * 2); // 延迟加倍
    } else {
      console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
      throw error;
    }
  }
}

登录后复制

错误日志与监控: 详细记录每次失败和重试的日志，有助于排查问题和监控系统健康状况。对于最终失败的请求，可以考虑将其URL记录下来，以便后续人工干预或重新处理。
服务器限流（Rate Limiting）: 如果你正在抓取大量网页，除了重试机制，还需考虑目标服务器可能存在的限流策略。在请求之间添加固定的延迟（而非仅仅在重试时）是常见的做法，以避免被封禁IP。

超时设置: fetch API本身没有直接的超时选项，但可以通过 AbortController 实现。在重试机制中结合超时，可以避免长时间等待无响应的请求。

// 结合 AbortController 实现超时
async function fetchWithTimeoutAndRetry(url, numberOfRetries, timeout = 5000) { // 默认5秒超时
  try {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout); // 设置超时计时器
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(id); // 请求成功或失败后清除超时计时器

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const html = await response.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    console.log(`Successfully parsed: ${url}`);
    return doc;
  } catch (error) {
    if (error.name === 'AbortError') {
        console.error(`Fetch request for ${url} timed out.`);
    }
    if (numberOfRetries > 0) {
      console.error(`Error fetching ${url}. Retrying... (${numberOfRetries} retries left)`, error);
      return fetchWithTimeoutAndRetry(url, numberOfRetries - 1, timeout);
    } else {
      console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
      throw error;
    }
  }
}

登录后复制