本文将介绍如何在 JavaScript 的 await fetch 操作期间显示一个等待动画，以提升用户体验。通过创建一个覆盖全屏的 div 元素，并结合 CSS 样式和 JavaScript 控制其显示与隐藏，可以有效地阻止用户在 API 请求期间进行其他操作，并提供视觉反馈。
在进行异步操作，特别是使用 await fetch 发起网络请求时，用户界面可能会出现短暂的停顿，导致用户体验下降。为了解决这个问题，我们可以添加一个等待动画，在请求期间显示，并在请求完成后隐藏，从而让用户知道程序正在处理请求。
实现步骤
- 创建 HTML 结构： 首先，我们需要在 HTML 中创建一个 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>Wait...</span> <!-- Loading spinner goes here --> </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: 使内容居中显示。
- background-color: rgba(0, 0, 0, 0.5): 添加半透明背景，增强视觉效果。
- display: none: 初始状态下隐藏 div。
- <span>Wait...</span>: 显示的文字信息，可以替换为更复杂的动画。
- JavaScript 控制显示与隐藏： 接下来，我们需要使用 JavaScript 在 await 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("Fetch error:", error);
// 可选：在此处处理错误，例如显示错误消息
} finally {
// 隐藏等待动画
document.getElementById("loading").style.display = "none";
}
}- document.getElementById("loading").style.display = "flex";: 显示等待动画。 使用 flex 而不是 block 确保内容居中。
- document.getElementById("loading").style.display = "none";: 隐藏等待动画。
- try...catch...finally: 使用 try...catch 块捕获可能发生的错误，并在 finally 块中确保等待动画始终被隐藏，即使发生错误。
完整示例
<!DOCTYPE html>
<html>
<head>
<title>Await Fetch with Loading Animation</title>
<style>
#loading {
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;
color: white; /* 设置文字颜色为白色 */
font-size: 20px; /* 设置文字大小 */
}
</style>
</head>
<body>
<button onclick="refreshStatus()">Refresh Status</button>
<div id="loading">
<span>Wait...</span>
<!-- Loading spinner goes here (e.g., using CSS or an image) -->
</div>
<script>
const the_url = "https://example.com/api"; // 替换为你的 API URL
const dict = { key: "value" }; // 替换为你的请求体数据
let ldata;
async function refreshStatus() {
// 显示等待动画
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"];
console.log("Data received:", ldata);
} catch (error) {
console.error("Fetch error:", error);
// 可选：在此处处理错误，例如显示错误消息
} finally {
// 隐藏等待动画
document.getElementById("loading").style.display = "none";
}
}
</script>
</body>
</html>优化与扩展
- 使用 CSS 动画： 可以使用 CSS 动画创建更复杂的加载指示器，例如旋转的圆圈或进度条。
- 使用库： 可以使用现有的 JavaScript 库来简化加载动画的创建和管理，例如 Spin.js 或 Ladda。
- 错误处理： 在 catch 块中添加错误处理逻辑，以便在请求失败时向用户显示有用的错误消息。
- 节流： 如果 refreshStatus 函数被频繁调用，可以考虑使用节流技术来限制请求的频率，避免过度消耗资源。
总结
通过以上步骤，我们可以轻松地在 await fetch 操作期间添加一个等待动画，从而提升用户体验。这种方法简单易懂，并且可以灵活地进行定制，以满足不同的需求。记住，良好的用户体验是任何应用程序成功的关键因素之一。
