本文介绍了如何在执行异步 `fetch` 请求时，通过添加一个全屏遮罩层和等待动画，来阻止用户在请求完成前与页面进行交互，从而提升用户体验。我们将提供详细的 HTML 和 JavaScript 代码示例，帮助你轻松实现这一功能。
在进行网络请求时，特别是在等待 API 响应时，为了避免用户在请求期间进行不必要的操作，显示一个等待动画是非常重要的。这不仅可以提升用户体验，还可以避免因用户重复操作导致的问题。下面将介绍如何通过 HTML 和 JavaScript 实现一个简单的等待动画。
实现原理
核心思路是创建一个覆盖整个屏幕的 div 元素，并将其初始状态设置为隐藏。在发起 fetch 请求前，显示该 div 元素，阻止用户与页面交互。当 fetch 请求完成后，隐藏该 div 元素，恢复用户的交互。
HTML 结构
首先，在 HTML 文件中添加一个 div 元素，用于显示等待动画。这个 div 元素需要具有以下特点：
- position: fixed;: 使其固定在屏幕上，不会随页面滚动而移动。
- z-index: 1000;: 确保它覆盖在所有其他元素之上。
- width: 100vw; height: 100vh;: 覆盖整个屏幕。
- top: 0; left: 0;: 从屏幕左上角开始覆盖。
- display: flex; justify-content: center; align-items: center;: 使内容（例如“Wait...”文本或加载动画）在 div 元素中居中显示。
- display: none;: 初始状态设置为隐藏。
<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; display: none; background-color: rgba(0, 0, 0, 0.5);">
<span style="color: white; font-size: 20px;">Wait...</span>
<!-- Loading spinner goes here -->
</div>在这个例子中，我们还添加了一个简单的文本 "Wait..."，你可以根据需要替换为更复杂的加载动画，例如 CSS 动画或 GIF 图片。同时，为了增强视觉效果，我们添加了半透明的背景颜色 rgba(0, 0, 0, 0.5)。
JavaScript 代码
接下来，在 JavaScript 代码中，在发起 fetch 请求前后，控制 div 元素的显示和隐藏。
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 fetching data:", error);
// 处理错误，例如显示错误消息
} finally {
// 隐藏等待动画
document.getElementById("loading").style.display = "none";
}
}这段代码中，document.getElementById("loading").style.display = "flex"; 用于显示等待动画，而 document.getElementById("loading").style.display = "none"; 用于隐藏等待动画。 使用 try...catch...finally 结构可以确保即使在 fetch 请求失败的情况下，等待动画也能被正确隐藏。
注意事项
- 错误处理： 在 try...catch 块中添加错误处理逻辑，以便在请求失败时通知用户。
- 加载动画： 根据实际需求，选择合适的加载动画。可以使用 CSS 动画、GIF 图片或第三方库。
- 性能优化： 如果页面中有大量的 DOM 操作，可以考虑使用 requestAnimationFrame 来优化动画性能。
- 用户体验： 等待动画的时间不宜过长，否则会影响用户体验。如果请求时间过长，可以考虑添加进度条或更详细的提示信息。
- 样式调整： 根据页面风格，调整等待动画的样式，使其与页面整体风格一致。
总结
通过以上步骤，你就可以轻松地为异步 fetch 请求添加等待动画，提升用户体验。记住，良好的用户体验是 Web 应用成功的关键之一。
