在进行批量网络请求，特别是循环抓取网页内容时，网络不稳定或瞬时故障可能导致 `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次是一个不错的起点。
-
指数退避（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; } } } 幂等性: 确保重试操作是幂等的，即多次执行相同的操作不会产生额外副作用。对于简单的GET请求通常不是问题，但对于POST/PUT等修改资源的操作，需要特别注意。
总结
通过实现一个异步重试机制，我们可以显著提升JavaScript中 fetch 操作的健壮性和可靠性，特别是在处理批量网络请求时。结合合理的重试次数、指数退避策略、超时控制以及详细的错误日志，开发者可以构建出更加稳定、高效的数据抓取和处理流程，有效应对复杂多变的网络环境。
