本文将介绍如何在 JavaScript 的 await fetch 操作期间显示一个等待动画，以提升用户体验。通过创建一个覆盖全屏的 div 元素，并结合 CSS 样式和 JavaScript 控制其显示与隐藏，可以有效地阻止用户在 API 请求期间进行其他操作，并提供视觉反馈。
在进行异步操作，特别是使用 await fetch 发起网络请求时，用户界面可能会出现短暂的停顿，导致用户体验下降。为了解决这个问题，我们可以添加一个等待动画，在请求期间显示，并在请求完成后隐藏，从而让用户知道程序正在处理请求。
实现步骤
创建 HTML 结构： 首先，我们需要在 HTML 中创建一个 div 元素，用于覆盖整个页面并显示等待动画。
Wait...
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。Wait…: 显示的文字信息，可以替换为更复杂的动画。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 块中确保等待动画始终被隐藏，即使发生错误。
完整示例
Await Fetch with Loading Animation #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; /* 设置文字大小 */ }Wait...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"; } }
优化与扩展
使用 CSS 动画： 可以使用 CSS 动画创建更复杂的加载指示器，例如旋转的圆圈或进度条。使用库： 可以使用现有的 JavaScript 库来简化加载动画的创建和管理，例如 Spin.js 或 Ladda。错误处理： 在 catch 块中添加错误处理逻辑，以便在请求失败时向用户显示有用的错误消息。节流： 如果 refreshStatus 函数被频繁调用，可以考虑使用节流技术来限制请求的频率，避免过度消耗资源。
总结
通过以上步骤，我们可以轻松地在 await fetch 操作期间添加一个等待动画，从而提升用户体验。这种方法简单易懂，并且可以灵活地进行定制，以满足不同的需求。记住，良好的用户体验是任何应用程序成功的关键因素之一。
以上就是使用 JavaScript 实现 await fetch 期间的等待动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530423.html
微信扫一扫 
支付宝扫一扫 
