本教程详细介绍了如何在javascript中为`fetch`请求实现健壮的重试机制，以应对网络不稳定导致的请求失败。通过构建一个`fetchwithretry`异步函数，我们可以在循环抓取网页内容时，自动重试失败的请求，从而显著提高数据抓取过程的稳定性和可靠性，避免因瞬时网络问题中断整个流程。
在进行批量网络请求，例如从多个URL抓取网页内容时，网络的不稳定性是一个常见挑战。当使用fetch API在循环中发送大量请求时，即使是短暂的网络波动或服务器响应延迟，都可能导致请求失败，进而中断整个处理流程。原始的代码结构可能如下所示：
for (const el of NodeList) {
const url = el.getAttribute('href');
const res = await fetch(url); // 如果没有响应，后续代码将不会执行
const html = await res.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
console.log('parsed successfully');
}在这种模式下，一旦某个fetch(url)请求因网络问题未能成功返回响应，整个循环的后续执行就会受到影响，导致数据抓取不完整或程序中断。为了解决这一问题，引入请求重试机制是提升应用健壮性的关键。
实现请求重试机制
请求重试机制的核心思想是：当一个网络请求失败时，不立即放弃，而是在一定次数内重新尝试发送该请求。这可以有效应对瞬时网络故障或服务器暂时性问题。我们可以封装一个异步函数fetchWithRetry来实现这一逻辑。
构建 fetchWithRetry 函数
fetchWithRetry函数将负责封装fetch请求，并在请求失败时递归地进行重试，直到成功或达到最大重试次数。
立即学习“Java免费学习笔记（深入）”；
/**
* 带有重试机制的异步 fetch 请求函数。
* @param {string} url - 要请求的URL。
* @param {number} numberOfRetries - 最大重试次数。
* @returns {Promise} 解析后的DOM文档对象。
* @throws {Error} 如果达到最大重试次数后请求仍然失败。
*/
async function fetchWithRetry(url, numberOfRetries) {
try {
// 尝试发起 fetch 请求
const response = await fetch(url);
// 检查响应状态，例如非2xx状态码也可以认为是失败
if (!response.ok) {
// 可以根据实际需求处理不同的HTTP状态码
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(`URL: ${url} parsed successfully`);
return doc; // 成功获取并解析，返回文档对象
} catch (error) {
// 捕获请求或解析过程中发生的错误
if (numberOfRetries > 0) {
// 如果还有重试次数，则进行重试
console.error(`Error fetching ${url}. Retrying... (${numberOfRetries} retries left)`, error);
// 递归调用自身，并将重试次数减一
return fetchWithRetry(url, numberOfRetries - 1);
} else {
// 重试次数耗尽，抛出最终错误
console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
throw error;
}
}
} 代码解析：
- async 函数声明： 确保函数内部可以使用await关键字，处理异步操作。
- try...catch 块： 这是错误处理的核心。try块包含可能失败的网络请求和HTML解析逻辑。如果其中任何一步抛出错误（例如网络连接断开、服务器无响应、fetch请求被拒绝、HTML解析失败），控制流将立即跳转到catch块。
- response.ok 检查： 除了捕获网络错误，还建议检查response.ok属性（response.status在200-299范围内为true），以处理HTTP层面的错误响应（如404, 500等）。
- numberOfRetries 参数： 用于控制最大重试次数，防止无限循环。
- 递归重试： 在catch块中，如果numberOfRetries大于0，表示还有重试机会。此时，函数会打印错误信息，然后通过return fetchWithRetry(url, numberOfRetries - 1)递归调用自身，并减少重试次数。
- 终止条件： 当numberOfRetries减至0时，表示已达到最大重试次数，但请求仍未成功。此时，函数会抛出原始错误，将问题向上层报告。
- 成功返回： 如果try块中的所有操作都成功完成，函数将返回解析后的doc对象。
集成重试机制到业务逻辑
现在，我们可以将原始循环中的fetch调用替换为fetchWithRetry函数：
async function processNodeList(NodeList) {
for (const el of NodeList) {
const url = el.getAttribute('href');
try {
// 使用带有重试机制的函数
const doc = await fetchWithRetry(url, 3); // 设定最大重试3次
// 在这里处理成功解析的文档
// 例如：提取数据、进一步操作DOM等
console.log(`Processed document from ${url}`);
// ... 其他业务逻辑 ...
} catch (error) {
// 如果经过多次重试后仍然失败，在这里处理最终错误
console.error(`Failed to process ${url} after multiple retries.`, error);
// 可以选择跳过当前URL，继续处理下一个，或者根据需求进行其他错误处理
}
}
}
// 假设有一个 NodeList
// const myNodeList = document.querySelectorAll('a');
// processNodeList(myNodeList);通过这种方式，主循环的代码变得更加简洁，并且能够自动处理因网络瞬时问题导致的请求失败，显著提升了整个数据抓取过程的稳定性。
注意事项与最佳实践
在实现重试机制时，还需要考虑以下几点以优化其效果和健壮性：
-
设置合理的重试次数：
- numberOfRetries应根据实际场景和对失败的容忍度来设定。过多的重试可能导致不必要的延迟和资源消耗，甚至对目标服务器造成压力；过少则可能无法有效应对问题。
-
错误日志记录：
- 详细的错误日志（包括URL、错误类型、重试次数等）对于调试和分析问题至关重要。
-
指数退避策略（Exponential Backoff）：
- 在每次重试之间引入一个逐渐增长的延迟，而不是立即重试。例如，第一次重试等待1秒，第二次等待2秒，第三次等待4秒。这有助于：
- 缓解服务器压力： 避免在服务器过载时立即发送大量重试请求。
- 提高成功率： 给服务器或网络足够的时间从瞬时故障中恢复。
- 实现时可以在fetchWithRetry的catch块中添加await new Promise(resolve => setTimeout(resolve, delay))。
- 在每次重试之间引入一个逐渐增长的延迟，而不是立即重试。例如，第一次重试等待1秒，第二次等待2秒，第三次等待4秒。这有助于：
-
超时设置：
- fetch API本身支持通过AbortController来设置请求超时。结合超时和重试机制，可以更精确地控制请求行为，避免长时间等待无响应的请求。
- 例如：
const controller = new AbortController(); const id = setTimeout(() => controller.abort(), 5000); // 5秒超时 const response = await fetch(url, { signal: controller.signal }); clearTimeout(id);
-
幂等性：
- 确保重试的操作是幂等的，即多次执行相同的操作不会产生额外的副作用。对于GET请求通常是幂等的，但对于POST、PUT等请求，需要谨慎处理。
-
用户体验（前端应用）：
- 如果是在前端应用中实现，考虑在重试期间向用户显示加载指示或错误提示，告知他们正在尝试恢复，避免页面长时间无响应。
总结
为fetch请求实现重试机制是构建健壮、可靠的JavaScript应用程序的关键一步，尤其是在处理大量网络请求或面对不稳定的网络环境时。通过封装一个fetchWithRetry函数，我们不仅能有效应对瞬时网络故障，还能使主业务逻辑更加清晰和易于维护。结合合理的重试次数、错误日志、指数退避和超时设置等最佳实践，可以显著提升应用程序的稳定性和用户体验。
