页面重载时如何处理网络错误

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript页面重载时如何应对瞬时网络错误》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

本文探讨了在JavaScript中使用window.location.reload()时，如何应对可能出现的瞬时网络错误。针对浏览器无法在页面重载期间直接控制加载过程的问题，文章提出了两种策略：一是利用navigator.onLine属性检查网络状态并进行条件性重载或延迟重试；二是采用更健壮的fetch()请求来验证实际的网络连通性。通过示例代码和实践考量，旨在帮助开发者构建更可靠的页面重载机制。

在Web应用开发中，有时我们需要通过JavaScript触发页面的重新加载，最常见的方式是调用window.location.reload()。然而，这种操作是“即发即忘”的，即一旦调用，浏览器就会尝试加载新页面，而原有的脚本无法在页面加载过程中持续监控其结果。这意味着，如果此时发生瞬时网络错误（例如，DNS解析失败、短暂的网络中断），页面可能无法成功加载，用户体验将受到影响。为了提高应用的健壮性，我们需要一种机制来处理这种潜在的瞬时错误，并在必要时进行重试。

策略一：利用 navigator.onLine 检查网络状态

navigator.onLine 是一个布尔属性，用于指示浏览器当前是否处于在线状态。当浏览器检测到网络连接可用时，该属性为 true；否则为 false。虽然它不能保证实际的网络连通性（例如，可能连接到局域网但无法访问互联网），但它提供了一个快速且初步的网络状态判断。

我们可以结合 navigator.onLine 和 setTimeout 来实现一个简单的重试机制。当需要重载页面时，首先检查 navigator.onLine。如果为 true，则执行 location.reload()；如果为 false，则延迟一段时间后再次尝试。

以下是一个实现示例：

/**
 * 尝试重新加载页面，若离线则延迟重试
 */
async function attemptReload() {
  console.log('尝试重新加载页面...');
  // 检查浏览器是否处于在线状态
  if (!navigator.onLine) {
    console.log('检测到离线状态，30秒后重试...');
    // 如果离线，则设置定时器，30秒后再次调用自身
    setTimeout(attemptReload, 30 * 1000);
    return; // 阻止立即重载
  }

  console.log('检测到在线状态，正在重载页面...');
  // 如果在线，则执行页面重载
  location.reload();
}

// 示例：为按钮添加点击事件监听器
document.querySelector('#reloadButton').addEventListener('click', attemptReload);

对应的HTML结构可能如下：

<button id="reloadButton">重新加载页面</button>

注意事项：

• navigator.onLine 仅反映浏览器对网络连接的“感知”，它可能无法准确反映到特定服务器的连通性。例如，用户可能连接到Wi-Fi，但Wi-Fi本身没有互联网访问权限。
• 固定的重试间隔（如30秒）可能不是最优的。在实际应用中，可以考虑使用指数退避（Exponential Backoff）策略，即每次重试失败后延长等待时间，以避免对服务器造成不必要的负担。

策略二：利用 fetch() 进行更健壮的连通性检查

为了获得更可靠的网络连通性判断，特别是确认能否访问特定服务器，可以使用 fetch() API 向服务器发送一个轻量级请求。如果 fetch() 请求成功（例如，返回HTTP 200 OK），则表明网络连接和服务器均可达；如果请求失败（例如，网络错误、超时），则可以判断为当前网络不可用或服务器无法访问，此时再进行延迟重试。

这种方法比 navigator.onLine 更为精确，因为它直接测试了与目标服务器的实际连通性。

以下是一个结合 fetch() 的重试机制示例：

/**
 * 尝试重新加载页面，通过fetch检查服务器连通性
 */
async function attemptReloadRobust() {
  console.log('尝试重新加载页面...');
  const checkUrl = '/api/health-check'; // 替换为你的服务器健康检查或任意轻量级接口
  const retryInterval = 30 * 1000; // 30秒重试间隔

  try {
    // 尝试向服务器发送一个轻量级请求
    const response = await fetch(checkUrl, { method: 'HEAD', cache: 'no-store' }); // 使用HEAD请求更高效

    if (response.ok) {
      console.log('服务器连通性良好，正在重载页面...');
      location.reload(); // 请求成功，执行重载
    } else {
      // 服务器响应非OK状态，可能是服务器内部错误或路由问题
      console.warn(`服务器响应非OK状态 (${response.status})，${retryInterval / 1000}秒后重试...`);
      setTimeout(attemptReloadRobust, retryInterval);
    }
  } catch (error) {
    // 捕获网络错误（如断网、DNS解析失败、超时等）
    console.error(`网络或服务器连接失败: ${error.message}，${retryInterval / 1000}秒后重试...`);
    setTimeout(attemptReloadRobust, retryInterval);
  }
}

// 示例：为另一个按钮添加点击事件监听器
document.querySelector('#robustReloadButton').addEventListener('click', attemptReloadRobust);

对应的HTML结构：

<button id="robustReloadButton">健壮地重新加载页面</button>

关键点：

• checkUrl: 选择一个轻量级、响应快速且不涉及敏感操作的API端点作为健康检查URL。例如，一个返回HTTP 200 OK的 /api/health-check 路由。
• method: 'HEAD': 如果你只需要检查连通性而不需要获取响应体，使用 HEAD 方法可以减少网络开销。
• cache: 'no-store': 确保每次都发送真实请求，而不是从浏览器缓存中读取。
• 错误处理: try...catch 块用于捕获网络连接中断、DNS解析失败等情况。response.ok 用于检查HTTP状态码是否在 200-299 范围内。

总结

在JavaScript中处理页面重载时的瞬时网络错误，关键在于在执行 location.reload() 之前或之后（通过重试机制）确认网络连通性。navigator.onLine 提供了一个快速但不够精确的判断，适用于对准确性要求不高的场景。而结合 fetch() API 进行服务器连通性检查，则能提供更健壮、更可靠的判断，尤其适用于对页面加载成功率要求较高的关键业务场景。

在实现这些策略时，除了代码逻辑，还应考虑以下方面以优化用户体验：

• 用户反馈： 在重试期间，向用户显示加载状态或重试倒计时，避免页面长时间无响应。
• 重试限制： 设置最大重试次数，防止无限循环重试。如果达到最大次数仍无法加载，则可以引导用户进行手动操作或显示错误信息。
• 日志记录： 记录重试尝试和失败原因，以便于调试和问题排查。

通过采用上述策略和最佳实践，可以显著提高Web应用在网络不稳定环境下的鲁棒性，从而提升用户体验。

到这里，我们也就讲完了《页面重载时如何处理网络错误》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！