为异步 Fetch 请求添加等待动画-js教程-PHP中文网

为异步 Fetch 请求添加等待动画

聖光之護

发布： 2025-10-18 10:39:18

原创

904人浏览过

为异步 fetch 请求添加等待动画

本文介绍了如何在执行异步 `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;: 初始状态设置为隐藏。

<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 style="color: white; font-size: 20px;">Wait...</span>
    <!-- Loading spinner goes here -->
</div>

登录后复制

在这个例子中，我们还添加了一个简单的文本 "Wait..."，你可以根据需要替换为更复杂的加载动画，例如 CSS 动画或 GIF 图片。同时，为了增强视觉效果，我们添加了半透明的背景颜色 rgba(0, 0, 0, 0.5)。

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

查看详情

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 请求失败的情况下，等待动画也能被正确隐藏。