本文旨在解决在javascript中进行大量网络请求时，因网络不稳定导致进程中断的问题。通过引入一个自定义的`fetchwithretry`函数，文章详细阐述了如何构建一个具备自动重试功能的请求机制。该机制能在请求失败时自动进行多次尝试，显著提升了web抓取或api调用的健壮性和成功率，确保即使面对瞬时网络故障也能顺利完成任务。
引言：网络请求的挑战与健壮性需求
在进行Web数据抓取、API调用或任何涉及大量HTTP请求的JavaScript应用中，网络的不稳定性是一个常见且难以避免的挑战。当应用程序需要在一个循环中发送成百上千个请求时，即使是短暂的网络波动、服务器响应延迟或瞬时连接中断，都可能导致整个处理流程中断，影响数据的完整性和程序的稳定性。
考虑以下常见的代码模式，它在一个循环中顺序执行网络请求和DOM解析：
for (const el of NodeList) { const url = el.getAttribute('href'); // 如果此处fetch请求失败或没有响应，后续代码将不会执行 const res = await fetch(url); const html = await res.text(); const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); alert('parsed successfully'); // 仅在浏览器环境中有效}
在这种模式下，一旦fetch(url)操作因为网络问题抛出错误或长时间无响应，后续的代码（如res.text()、DOMParser解析）将无法执行，导致当前循环迭代中断，甚至可能影响到整个循环的继续执行，从而破坏整个数据获取过程。为了提升应用的鲁棒性，我们需要一种机制来优雅地处理这些瞬时故障。
解决方案：实现请求重试机制
解决上述问题的核心在于引入一个重试机制。当fetch请求失败时，程序不应立即放弃，而是应该在限定的次数内进行多次尝试，直到请求成功或达到最大重试次数。这可以通过封装一个自定义的异步函数来实现。
立即学习“Java免费学习笔记（深入）”；
fetchWithRetry 函数详解
我们将创建一个名为fetchWithRetry的异步函数，它负责处理单个URL的请求，并在失败时自动重试。
/** * 异步函数，用于带重试机制地获取网页内容并解析。 * @param {string} url - 要抓取的URL。 * @param {number} numberOfRetries - 最大重试次数。 * @returns {Promise} 解析后的DOM Document对象。 * @throws {Error} 当达到最大重试次数后仍然失败时抛出错误。 */async function fetchWithRetry(url, numberOfRetries) { try { // 尝试执行标准的fetch请求 const response = await fetch(url); // 检查HTTP响应状态码，例如，非2xx状态码也可能需要重试 if (!response.ok) { // 对于服务器错误（5xx）或特定客户端错误（如429 Too Many Requests）可以考虑重试 // 对于其他如404 Not Found，通常不适合重试 if (numberOfRetries > 0 && (response.status >= 500 || response.status === 429)) { console.warn(`URL: ${url} 收到非成功状态码 ${response.status}。正在重试... 剩余重试次数: ${numberOfRetries}`); // 可以添加一个延迟，避免立即重试导致服务器压力过大或再次失败 await new Promise(resolve => setTimeout(resolve, 1000 * (3 - numberOfRetries + 1))); // 递增延迟 return fetchWithRetry(url, numberOfRetries - 1); } else { // 对于不适合重试的非成功状态码，直接抛出错误 throw new Error(`HTTP Error: ${response.status} for URL: ${url}`); } } const html = await response.text(); const parser = new DOMParser(); // 注意：DOMParser是浏览器API，在Node.js中需要polyfill const doc = parser.parseFromString(html, 'text/html'); console.log(`URL: ${url} 解析成功。`); return doc; } catch (error) { // 捕获网络错误或其他运行时错误 if (numberOfRetries > 0) { console.error(`URL: ${url} 请求失败。正在重试... 剩余重试次数: ${numberOfRetries}`, error); // 在重试前添加一个延迟，给网络或服务器恢复时间 await new Promise(resolve => setTimeout(resolve, 1000 * (3 - numberOfRetries + 1))); // 递增延迟 return fetchWithRetry(url, numberOfRetries - 1); // 递归调用自身进行重试 } else { console.error(`URL: ${url} 请求失败。已达到最大重试次数。`, error); throw error; // 达到最大重试次数后，抛出最终错误 } }}
函数说明：
参数：url: 目标网页的URL。numberOfRetries: 允许的最大重试次数。try…catch 块：try 块： 包含正常的fetch请求、响应处理和DOMParser解析逻辑。如果请求成功且响应状态码为2xx，则返回解析后的Document对象。响应状态码检查： 除了网络错误，我们还增加了对HTTP响应状态码的检查。对于服务器错误（5xx）或特定的客户端错误（如429 Too Many Requests，表示请求过于频繁），也视为需要重试的情况。对于其他如404（未找到）等，通常不应重试，而是直接抛出错误。catch 块： 捕获任何在try块中发生的错误，包括网络连接问题、DNS解析失败或上述非成功的HTTP响应。重试判断： 检查numberOfRetries是否大于0。如果还有剩余重试次数，则输出错误信息，并递归调用fetchWithRetry函数，同时将numberOfRetries减1。延迟重试： 在每次重试前，我们引入了一个setTimeout来创建一个延迟。这非常重要，可以避免在短时间内对服务器造成过大压力，并给网络或服务器一个恢复的时间。这里使用了一个简单的递增延迟策略，例如第一次重试等待1秒，第二次等待2秒，以此类推。最大重试次数： 如果numberOfRetries为0，表示已达到最大重试次数，此时不再重试，而是抛出原始错误，让上层调用者处理。
在循环中集成重试函数
现在，我们可以将原始循环中的fetch调用替换为我们新创建的fetchWithRetry函数：
const NodeList = [ { getAttribute: (attr) => attr === 'href' ? 'https://example.com/page1' : '' }, { getAttribute: (attr) => attr === 'href' ? 'https://example.com/page2' : '' }, { getAttribute: (attr) => attr === 'href' ? 'https://example.com/page3' : '' }, // 更多节点...];async function processNodes() { for (const el of NodeList) { const url = el.getAttribute('href'); try { // 调用带重试机制的函数，例如，最多重试3次 const doc = await fetchWithRetry(url, 3); // 在此处处理解析后的文档对象 console.log(`成功处理URL: ${url}，文档标题: ${doc.title}`); // alert('parsed successfully'); // 在实际应用中，避免在循环中频繁使用alert } catch (error) { console.error(`处理URL: ${url} 最终失败:`, error.message); // 可以选择记录失败的URL，或进行其他错误恢复操作 } } console.log('所有节点处理完毕。');}// 调用主处理函数processNodes();
通过这种方式，即使在处理过程中遇到临时的网络问题，程序也能自动尝试恢复，大大提高了整个数据获取过程的健壮性。
注意事项与最佳实践
最大重试次数的设定： 合理设置numberOfRetries至关重要。过多的重试可能导致不必要的资源消耗和时间延长，而过少的重试则可能无法应对常见的瞬时故障。通常，3到5次是一个比较合理的范围。重试延迟策略：固定延迟： 每次重试都等待相同的时间。指数退避（Exponential Backoff）： 每次重试的等待时间逐渐增加（例如，1秒、2秒、4秒、8秒…）。这种策略能有效避免在服务器负载过高时进一步加剧问题，并给服务器更长的恢复时间。上述示例中采用了简化的递增延迟。抖动（Jitter）： 在指数退避的基础上，随机化一部分延迟时间，避免所有客户端同时重试造成“惊群效应”。错误类型区分： 并非所有错误都适合重试。例如：网络错误（Network Error）、超时（Timeout）： 适合重试。HTTP 5xx 状态码（服务器错误）： 通常适合重试。HTTP 429 Too Many Requests： 适合重试，但需要结合指数退避和等待Retry-After头部字段指示的时间。HTTP 4xx 状态码（客户端错误，如404 Not Found、400 Bad Request）： 通常不适合重试，因为这意味着请求本身有问题，重试也无济于事。超时配置： fetch API本身支持AbortController来实现请求超时。将其与重试机制结合，可以在规定时间内未收到响应时触发重试。错误日志与监控： 详细的错误日志对于调试和理解系统行为至关重要。记录每次失败的URL、错误类型和重试次数，有助于发现潜在的长期问题。并发控制： 如果在循环中并行发送大量请求，还需要考虑并发控制，避免同时打开过多的网络连接，这可以通过使用Promise.allSettled结合限制并发数的工具库（如p-limit）来实现。DOMParser的适用性： DOMParser是浏览器环境下的API。如果在Node.js环境中进行服务器端抓取，需要使用类似jsdom或cheerio等库来解析HTML。本教程的示例代码假设在浏览器或类似浏览器环境（如Electron）中运行。
总结
通过实现一个健壮的fetchWithRetry函数，我们可以显著提升JavaScript应用程序处理网络请求的可靠性。这种重试机制能够有效地应对瞬时网络故障和服务器不稳定，确保即使在复杂的网络环境下，也能最大限度地完成数据获取任务。结合合理的重试策略、延迟机制和错误处理，我们可以构建出更加稳定和用户友好的Web应用。
以上就是JavaScript中Fetch请求的健壮性：实现自动重试机制处理网络不稳定的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537875.html
微信扫一扫 
支付宝扫一扫 
