本文介绍如何在 JavaScript 的 `await fetch` 调用期间显示等待动画，以阻塞用户交互并提供更好的用户体验。通过添加一个全屏覆盖层，并在 API 请求开始和结束时控制其显示和隐藏，可以有效地实现等待动画效果，防止用户在数据加载期间进行误操作。
在进行网络请求时，特别是使用 await fetch 等待响应时，如果请求时间较长，用户可能会感到困惑，甚至重复点击按钮，导致不必要的错误或请求。为了提升用户体验，可以在请求期间显示一个等待动画，告知用户程序正在处理中，并阻止进一步的交互。
以下是如何实现这一目标的步骤：
1. 创建全屏覆盖层（Loading 动画容器）
首先，在 HTML 中添加一个 div 元素，用于作为等待动画的容器。这个 div 将覆盖整个页面，并包含等待动画的视觉元素（例如，旋转的图标、文字提示等）。
<div id="loading" style="position: fixed; z-index: 1000; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); display: none;"> <span>加载中...</span> <!-- Loading spinner goes here (可以使用 CSS 或第三方库实现) --> </div>
- position: fixed: 确保 div 始终位于视口中，不会随页面滚动而移动。
- z-index: 1000: 确保 div 位于所有其他元素的上方。
- width: 100vw; height: 100vh: 使 div 覆盖整个视口。
- top: 0; left: 0: 将 div 定位到视口的左上角。
- display: flex; justify-content: center; align-items: center: 使 div 的内容（例如，"加载中..." 文字）居中显示。
- background-color: rgba(0, 0, 0, 0.5): 添加一个半透明的背景，以使等待动画更突出。
- display: none: 默认情况下，隐藏 div。
2. 显示和隐藏覆盖层
接下来，使用 JavaScript 在 fetch 请求开始之前显示覆盖层，并在请求完成之后隐藏覆盖层。
async function refreshStatus(mode) {
// 显示等待动画
document.getElementById("loading").style.display = "flex";
try {
var response = await fetch(
the_url,
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify(dict)
}
);
const jdata = await response.json();
ldata = jdata["results_list"];
} catch (error) {
console.error("请求失败:", error);
// 处理错误，例如显示错误消息
} finally {
// 隐藏等待动画
document.getElementById("loading").style.display = "none";
}
}- document.getElementById("loading").style.display = "flex";: 将 display 属性设置为 flex，以显示覆盖层。 使用 flex 可以保证其内部元素（如“加载中...”文字）的居中显示。 如果覆盖层内部没有需要居中的元素，也可以设置为 block。
- document.getElementById("loading").style.display = "none";: 将 display 属性设置为 none，以隐藏覆盖层。
- try...catch...finally: 使用 try...catch 块来捕获 fetch 请求可能发生的错误。 finally 块确保无论请求成功还是失败，等待动画都会被隐藏。
3. 添加 Loading 动画
仅仅显示 "加载中..." 文字可能不够吸引人。 可以使用 CSS 或第三方库来添加更复杂的 loading 动画。
- CSS 动画: 可以使用 CSS keyframes 创建旋转的图标或其他动画效果，并将其添加到 loading div 中。
- 第三方库: 有许多 JavaScript 库提供了各种各样的 loading 动画，例如 Spin.js, Ladda, 等。
示例：使用 CSS 创建简单的旋转动画
<div id="loading" style="position: fixed; z-index: 1000; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); display: none;">
<div class="spinner"></div>
<span>加载中...</span>
</div>
<style>
.spinner {
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 5px solid #fff;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>注意事项
- 避免阻塞主线程: 确保 loading 动画的实现不会阻塞 JavaScript 的主线程，否则可能会导致页面卡顿。
- 优化性能: 对于复杂的 loading 动画，需要注意性能优化，避免过度消耗 CPU 资源。
- 用户体验: loading 动画的设计应简洁明了，避免过于花哨或分散用户的注意力。
- 错误处理: 在 catch 块中处理 fetch 请求可能发生的错误，并向用户显示友好的错误消息。
总结
通过使用全屏覆盖层和 JavaScript 控制其显示和隐藏，可以轻松地在 await fetch 调用期间显示等待动画，提升用户体验。 选择合适的 loading 动画效果，并注意性能优化和错误处理，可以使你的应用程序更加专业和用户友好。
