JavaScript中Fetch请求的健壮性：实现自动重试机制处理网络不稳定

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'); // 仅在浏览器环境中有效
}

/**
 * 异步函数，用于带重试机制地获取网页内容并解析。
 * @param {string} url - 要抓取的URL。
 * @param {number} numberOfRetries - 最大重试次数。
 * @returns {Promise<Document>} 解析后的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; // 达到最大重试次数后，抛出最终错误
    }
  }
}

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();