加载遮罩怎么在异步请求期间正确显示和隐藏？

UX克样提问于 2026-03-26 11:50:21 阅读 44

交互

我做了一个表单提交功能，想在请求期间加个全屏遮罩防止重复点击，但遮罩有时候不消失，特别是在请求出错的时候。我试过在 finally 里关掉遮罩，但好像没生效。

这是我的代码：

const showLoading = () => {
  document.getElementById('loading-mask').style.display = 'block';
};
const hideLoading = () => {
  document.getElementById('loading-mask').style.display = 'none';
};

// 提交时调用
showLoading();
fetch('/submit', { method: 'POST' })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(hideLoading);

我来解答赞 5 收藏

反馈

1 条解答

Des.怡硕 Lv1

看你的代码问题出在 finally 里直接调用 hideLoading 函数。如果请求被 reject 的时候，catch 已经执行过了，finally 还是会继续执行，但这时候有可能已经报错了。

复制这个改下：

const showLoading = () => {

  document.getElementById('loading-mask').style.display = 'block';

};

const hideLoading = () => {

  document.getElementById('loading-mask').style.display = 'none';

};



// 提交时调用

showLoading();

fetch('/submit', { method: 'POST' })

  .then(res => res.json())

  .then(data => console.log(data))

  .catch(err => {

    console.error(err);

    hideLoading(); // 在 catch 里也处理一下

  })

  .finally(() => {

    if (!document.querySelector('#loading-mask')) return; // 防止元素被移除

    hideLoading();

  });

这样就算请求出错也能正常关闭遮罩了。记得检查下 loading-mask 元素是否存在，有时候页面跳转可能会导致找不到元素报错。累死了，写代码真费劲。

2026-03-26 12:00