使用 J*aScript 实现 await fetch 期间的等待动画_技术学堂

使用 J*aScript 实现 await fetch 期间的等待动画

发布时间：2025-10-18 08:29

发布者：网络

浏览次数：

使用 javascript 实现 await fetch 期间的等待动画

本文将介绍如何在 J*aScript 的 await fetch 操作期间显示一个等待动画，以提升用户体验。通过创建一个覆盖全屏的 div 元素，并结合 CSS 样式和 J*aScript 控制其显示与隐藏，可以有效地阻止用户在 API 请求期间进行其他操作，并提供视觉反馈。

在进行异步操作，特别是使用 await fetch 发起网络请求时，用户界面可能会出现短暂的停顿，导致用户体验下降。为了解决这个问题，我们可以添加一个等待动画，在请求期间显示，并在请求完成后隐藏，从而让用户知道程序正在处理请求。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

实现步骤

创建 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。
Wait...: 显示的文字信息，可以替换为更复杂的动画。

J*aScript 控制显示与隐藏： 接下来，我们需要使用 J*aScript 在 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 动画创建更复杂的加载指示器，例如旋转的圆圈或进度条。
使用库： 可以使用现有的 J*aScript 库来简化加载动画的创建和管理，例如 Spin.js 或 Ladda。
错误处理： 在 catch 块中添加错误处理逻辑，以便在请求失败时向用户显示有用的错误消息。
节流： 如果 refreshStatus 函数被频繁调用，可以考虑使用节流技术来限制请求的频率，避免过度消耗资源。

总结

通过以上步骤，我们可以轻松地在 await fetch 操作期间添加一个等待动画，从而提升用户体验。这种方法简单易懂，并且可以灵活地进行定制，以满足不同的需求。记住，良好的用户体验是任何应用程序成功的关键因素之一。

以上就是使用 J*aScript 实现 await fetch 期间的等待动画的详细内容，更多请关注其它相关文章！

# css # javascript # java # html # js # json # go # app # access # ai # 复选框 # 并在 # 我们可以 # 自定义 # 可以使用 # 可选 # 创建一个 # 拖拽 # 加载 # 容器内 # 新乡做seo优化 # 响应式网站建设怎么选 # 广州自动seo # 自然优化网站日志 # 瑜伽推广营销文案范文 # 海门营销推广有哪些 # 智慧网站怎么做推广的 # 公司建设用什么网站好 # seo技能培训 # 全民夺宝如何营销推广