为异步 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)。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

13

查看详情

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 请求添加等待动画的详细内容，更多请关注php中文网其它相关文章！