在 JavaScript 应用中，页面重载是一个常见的操作，但瞬时网络错误可能会中断重载过程，导致页面加载失败。为了提高应用的健壮性，我们需要采取一些措施来处理这种情况。
使用 navigator.onLine 检测网络状态
navigator.onLine 属性可以用来检测浏览器当前的网络连接状态。如果浏览器处于在线状态，该属性返回 true；否则返回 false。我们可以利用这个属性来判断是否可以安全地进行页面重载。
以下是一个示例代码，展示了如何使用 navigator.onLine 和 setTimeout 来实现重试机制：
async function attemptReload() {
console.log('尝试重新加载');
if (!navigator.onLine) {
console.log('网络离线，等待 30 秒后重试');
setTimeout(attemptReload, 30 * 1000); // 30 秒后重试
return;
}
console.log('网络在线，重新加载页面');
location.reload();
}
// 绑定到按钮点击事件
document.querySelector('#reload').addEventListener('click', attemptReload);<button id='reload'>重新加载</button>
这段代码首先定义了一个 attemptReload 函数，该函数会检查 navigator.onLine 的值。如果网络离线，函数会使用 setTimeout 在 30 秒后再次调用 attemptReload 函数，从而实现重试机制。如果网络在线，函数会调用 location.reload() 来重新加载页面。
立即学习“Java免费学习笔记（深入）”；
注意事项：
- navigator.onLine 属性并非完全可靠，它只能检测浏览器是否能够访问网络，但不能保证网络连接的质量。即使 navigator.onLine 返回 true，也可能存在网络延迟或丢包的情况。
- setTimeout 函数的执行时间并非绝对精确，可能会受到浏览器性能和其他因素的影响。
使用 fetch() 方法进行网络状态检查
除了使用 navigator.onLine 之外，还可以使用 fetch() 方法来发送一个简单的请求到服务器，以此来判断网络连接是否正常。如果请求成功，则认为网络连接正常；否则，认为网络连接存在问题。
以下是一个使用 fetch() 方法进行网络状态检查的示例代码：
async function attemptReloadWithFetch() {
console.log('尝试重新加载 (使用 fetch)');
try {
const response = await fetch('/api/healthcheck', { mode: 'no-cors' }); // 替换为你的服务器端点
if (response.ok) {
console.log('服务器可达，重新加载页面');
location.reload();
} else {
console.log('服务器响应错误，等待 30 秒后重试');
setTimeout(attemptReloadWithFetch, 30 * 1000);
}
} catch (error) {
console.log('网络错误，等待 30 秒后重试', error);
setTimeout(attemptReloadWithFetch, 30 * 1000);
}
}
document.querySelector('#reloadFetch').addEventListener('click', attemptReloadWithFetch);<button id='reloadFetch'>重新加载 (使用 Fetch)</button>
这段代码首先定义了一个 attemptReloadWithFetch 函数，该函数使用 fetch() 方法向 /api/healthcheck 发送一个请求。如果请求成功，并且服务器返回的状态码在 200-299 之间，则认为网络连接正常，并调用 location.reload() 重新加载页面。否则，认为网络连接存在问题，并使用 setTimeout 在 30 秒后再次调用 attemptReloadWithFetch 函数。
注意事项：
- 需要替换 /api/healthcheck 为你的服务器端点，这个端点应该能够快速响应，并且不依赖于复杂的逻辑。
- { mode: 'no-cors' } 选项用于避免跨域问题，如果你的 API 允许跨域访问，可以省略这个选项。
- 使用 fetch() 方法可以更准确地检测网络连接的质量，因为它可以检测服务器是否可达。
总结
本文介绍了两种在 JavaScript 中处理页面重载时可能发生的瞬时网络错误的方法：使用 navigator.onLine 属性和使用 fetch() 方法。前者简单易用，但可靠性较低；后者更准确，但需要配置服务器端点。你可以根据你的实际需求选择合适的方法。通过使用这些方法，你可以提高应用的健壮性，确保页面在网络恢复后能够成功重载。
