本文介绍了如何在执行异步 `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;: 初始状态设置为隐藏。
Wait...
在这个例子中，我们还添加了一个简单的文本 “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 应用成功的关键之一。
以上就是为异步 Fetch 请求添加等待动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530522.html
微信扫一扫 
支付宝扫一扫 
