在批量循环抓取网页时，网络不稳定常导致`fetch`请求失败并中断整个过程。本文旨在提供一个实用的解决方案，通过构建一个带有重试机制的异步`fetch`函数，确保即使面对瞬时网络故障，也能自动尝试重新获取网页内容。该策略显著提升了数据抓取任务的健壮性和完成率，避免因偶发网络问题导致整体流程中断。
在Web开发中，尤其是在需要从多个URL抓取内容的应用场景下，例如遍历一个NodeList并对每个元素对应的URL发起fetch请求，网络的不稳定性是一个常见的挑战。一个简单的fetch调用在遇到网络问题（如连接超时、DNS解析失败等）时，会立即抛出错误，导致后续代码无法执行，进而中断整个循环过程。这对于需要处理大量请求且要求高成功率的任务来说，是不可接受的。
考虑以下典型的网页抓取循环：
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)因网络问题未能获取响应，await fetch(url)这一行就会抛出异常，导致整个循环中断，或者至少当前迭代无法完成。为了增强程序的健壮性，我们需要一种机制来自动处理这类瞬时错误，即在请求失败时自动进行重试。
解决上述问题的核心在于引入一个重试机制。我们可以封装一个异步函数，该函数在fetch失败时捕获错误，并根据预设的重试次数再次尝试请求。
我们将创建一个名为fetchWithRetry的异步函数，它接受目标URL和最大重试次数作为参数。
/**
* 带有重试机制的异步Fetch函数
* @param {string} url - 需要请求的URL
* @param {number} numberOfRetries - 最大重试次数
* @returns {Promise<Document>} - 解析后的DOM文档对象
*/
async function fetchWithRetry(url, numberOfRetries) {
try {
const response = await fetch(url);
// 检查HTTP状态码，确保请求成功（例如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(`Successfully parsed: ${url}`); // 使用console.log代替alert
return doc;
} catch (error) {
if (numberOfRetries > 0) {
console.warn(`Error fetching ${url}. Retrying... Attempts left: ${numberOfRetries - 1}`, error.message);
// 递归调用自身进行重试，并递减重试次数
// 可以选择在此处添加一个延迟，例如 await new Promise(resolve => setTimeout(resolve, 1000));
return fetchWithRetry(url, numberOfRetries - 1);
} else {
console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
// 重试次数用尽后，抛出原始错误，以便上层调用者处理
throw error;
}
}
}函数解析：
现在，我们可以将原始循环中的fetch调用替换为fetchWithRetry：
async function processNodeList(NodeList) {
for (const el of NodeList) {
const url = el.getAttribute('href');
try {
// 调用带有重试机制的函数，例如最多重试3次
const doc = await fetchWithRetry(url, 3);
// 在这里处理成功解析的文档
console.log(`Processed URL: ${url}`);
// 示例：获取标题
const title = doc.querySelector('title')?.textContent || 'No Title';
console.log(`Title: ${title}`);
} catch (error) {
// 捕获fetchWithRetry最终抛出的错误，处理所有重试失败的情况
console.error(`Failed to process URL after multiple retries: ${url}`, error);
// 可以记录日志，或者将失败的URL添加到列表中稍后处理
}
}
}
// 假设NodeList已经定义并填充
// processNodeList(myNodeList); 集成说明：
async function fetchWithRetryWithBackoff(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.warn(`Error fetching ${url}. Retrying in ${delay / 1000}s... Attempts left: ${numberOfRetries - 1}`, error.message);
await new Promise(resolve => setTimeout(resolve, delay)); // 引入延迟
return fetchWithRetryWithBackoff(url, numberOfRetries - 1, delay * 2); // 延迟加倍
} else {
console.error(`Error fetching ${url}. Maximum retries exceeded.`, error);
throw error;
}
}
}
// 使用示例
// const doc = await fetchWithRetryWithBackoff(url, 3, 500); // 初始延迟0.5秒通过实现一个带有重试机制的fetch函数，我们能够显著提高批量网页抓取任务的鲁棒性。这种方法使得应用程序能够优雅地处理瞬时网络故障，减少因偶发问题导致的数据丢失或流程中断。结合适当的重试策略（如指数退避）和错误处理，可以构建出更加稳定和高效的网络数据抓取应用。
以上就是优化循环网页抓取：实现健壮的Fetch请求重试机制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
395
收藏
