显示等待动画：Await Fetch 期间的用户交互阻塞

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

显示等待动画：Await Fetch 期间的用户交互阻塞

2025-10-18

浏览次数：次

返回列表

显示等待动画：await fetch 期间的用户交互阻塞

本文介绍如何在 J*aScript 的 await fetch 调用期间显示一个全屏等待动画，从而阻塞用户与页面的进一步交互。通过创建一个覆盖整个页面的 div 元素，并利用 CSS 控制其显示与隐藏，可以实现一个简单的等待提示效果，提升用户体验。

在进行网络请求时，特别是使用 await fetch 进行异步操作时，用户可能需要等待一段时间才能看到结果。为了提升用户体验，可以在等待期间显示一个等待动画，并阻塞用户与页面的进一步交互，避免不必要的操作。

实现方法

主要思路是创建一个覆盖整个页面的 div 元素，并使用 CSS 控制其显示与隐藏。当发起 fetch 请求时，显示该 div 元素，当请求完成后，隐藏该 div 元素。

1. HTML 结构

首先，在 HTML 中添加一个 div 元素，用于显示等待动画。该 div 元素需要覆盖整个页面，并具有较高的 z-index 值，以确保其位于其他元素之上。

<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>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: 使用 Flexbox 布局，将内容居中显示。
display: none: 默认情况下，隐藏 div 元素。
background-color: rgba(0, 0, 0, 0.5): 添加半透明的背景色，进一步遮盖页面内容。

2. J*aScript 代码

接下来，在 J*aScript 代码中，在发起 fetch 请求之前显示 div 元素，在请求完成后隐藏 div 元素。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

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";: 将 div 元素的 display 属性设置为 "flex"，使其显示出来。使用flex是为了让其中的内容居中显示。
document.getElementById("loading").style.display = "none";: 将 div 元素的 display 属性设置为 "none"，使其隐藏起来。
try...catch...finally: 使用 try...catch...finally 块来处理可能发生的错误，并在 finally 块中确保等待动画始终被隐藏，即使发生错误。

3. 添加加载动画

为了让等待提示更加友好，可以在 div 元素中添加一个加载动画。可以使用 CSS 或 J*aScript 创建加载动画，也可以使用现成的加载动画库。例如，可以使用 Font Awesome 提供的加载图标：

<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>Wait...</span>
    <i class="fas fa-spinner fa-spin fa-3x"></i>
</div>

需要引入 Font Awesome 的 CSS 文件。

注意事项

在实际应用中，可以根据需要自定义等待动画的样式和内容。
确保在请求完成后及时隐藏等待动画，避免影响用户体验。
如果请求时间过长，可以考虑添加超时处理，并向用户显示提示信息。
使用 try...catch...finally 块来处理可能发生的错误，并在 finally 块中确保等待动画始终被隐藏。
考虑使用更高级的加载指示器库，例如NProgress或 Pace，它们提供了更丰富的定制选项和动画效果。

总结

通过创建一个全屏 div 元素，并使用 CSS 和 J*aScript 控制其显示与隐藏，可以实现在 await fetch 调用期间显示等待动画，并阻塞用户与页面的进一步交互。这种方法简单易用，可以有效地提升用户体验。结合合适的加载动画和错误处理机制，可以创建一个更加友好和健壮的等待提示效果。

以上就是显示等待动画：Await Fetch 期间的用户交互阻塞的详细内容，更多请关注其它相关文章！

# 可以使用 # 微博seo伪原创 # 哪个博客框架seo好 # 保定营销网站推广联系人 # 文献资源如何做seo # 网站网络推广教程图片 # 今日头条搜索seo # 岚县网站推广服务电话 # 全网营销推广眯呐云速捷db冫 # 美团网的网站推广方案 # 惠州网站推广优化 # 设置为 # 完成后 # 可以实现 # 并在 # css # 自定义 # 复选框 # 创建一个 # 加载 # 使其 # ai # access # app # go # json # js # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：如何通过css实现响应式grid网格

下一篇：在 Angular 中访问接口属性的方法

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

显示等待动画：Await Fetch 期间的用户交互阻塞