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

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

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

Noya

让线框图变成高保真设计。

下载

实现步骤

1. 创建 HTML 结构： 首先，我们需要在 HTML 中创建一个 div 元素，用于覆盖整个页面并显示等待动画。

   Wait...
   

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

2. 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 块中确保等待动画始终被隐藏，即使发生错误。

完整示例

    
    


    Refresh Status

    

        Wait...
        
    

    

优化与扩展

• 使用 CSS 动画： 可以使用 CSS 动画创建更复杂的加载指示器，例如旋转的圆圈或进度条。
• 使用库： 可以使用现有的 JavaScript 库来简化加载动画的创建和管理，例如 Spin.js 或 Ladda。
• 错误处理： 在 catch 块中添加错误处理逻辑，以便在请求失败时向用户显示有用的错误消息。
• 节流： 如果 refreshStatus 函数被频繁调用，可以考虑使用节流技术来限制请求的频率，避免过度消耗资源。

总结

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