为await fetch API调用添加阻塞式等待弹窗动画的实现咨询

步骤1：添加HTML结构 #

在页面<body>末尾添加全屏遮罩和加载弹窗：

<!-- 加载遮罩层 -->
<div id="loadingOverlay" style="display: none;">
  <div class="loadingContent">
    <div class="spinner"></div>
    <p>加载中...</p>
  </div>
</div>

步骤2：添加CSS样式 #

设置遮罩层样式，确保覆盖全屏、拦截交互、内容居中：

#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  pointer-events: auto;
}

.loadingContent {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

/* 旋转加载动画 */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

步骤3：修改JavaScript函数 #

在API调用前后控制弹窗显示/隐藏，同时处理异常确保弹窗必关：

async function refreshStatus(mode) {
  const loadingOverlay = document.getElementById('loadingOverlay');
  
  // 显示加载弹窗
  loadingOverlay.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);
    // 可在这里添加用户错误提示
  } finally {
    // 无论请求成功/失败，都关闭弹窗
    loadingOverlay.style.display = 'none';
  }
}

关键提示 #

• pointer-events: auto让遮罩层拦截所有点击，彻底阻止用户操作页面其他元素
• try/finally确保API请求出现异常时，弹窗也能正常关闭，避免页面卡死

内容的提问来源于stack exchange，提问作者Akshay J