使用 JavaScript 实现 await fetch 期间的等待动画-js教程-PHP中文网

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

DDD

发布： 2025-10-18 08:29:01

原创

499人浏览过

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

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

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

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

实现步骤

创建 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>

登录后复制