SweetAlert2 中 showLoaderOnConfirm 加载器不显示问题解析

问题现象

在使用 SweetAlert2 弹窗库时，开发者可能会遇到一个常见问题：当设置了 showLoaderOnConfirm: true 选项后，点击确认按钮时加载动画没有如预期般显示。虽然通过开发者工具可以观察到加载器元素确实存在于 DOM 中，但由于其 display: none 的样式设置而无法显示。

问题根源

经过分析，这个问题通常出现在 preConfirm 回调函数中。当开发者在该回调中立即返回 false 时，会意外地中断 SweetAlert2 的加载状态管理机制。具体表现为：

1. 点击确认按钮后，SweetAlert2 开始准备显示加载器
2. 但由于 preConfirm 立即返回 false，系统又立即取消了加载状态
3. 这导致加载器还没来得及显示就被隐藏了

解决方案

要正确实现加载动画效果，开发者需要注意以下几点：

1. 异步操作处理：preConfirm 应该返回一个 Promise 对象，而不是立即返回值
2. 合理的返回值：只有在真正需要取消操作时才返回 false
3. 错误处理：通过 reject Promise 来处理错误情况，而不是直接返回 false

正确用法示例

Swal.fire({
  title: '请确认',
  text: '您确定要执行此操作吗？',
  showLoaderOnConfirm: true,
  preConfirm: () => {
    return new Promise((resolve) => {
      // 模拟异步操作
      setTimeout(() => {
        resolve()
      }, 2000)
    })
  }
})

实现原理

SweetAlert2 的加载状态管理机制遵循以下流程：

1. 用户点击确认按钮
2. 系统隐藏确认按钮，显示加载器（如果启用了 showLoaderOnConfirm）
3. 执行 preConfirm 回调
4. 等待回调完成（如果是 Promise）
5. 根据结果决定后续操作
6. 恢复按钮状态或保持加载状态

最佳实践

1. 对于需要用户确认的操作，始终考虑使用异步模式
2. 在 preConfirm 中处理实际的业务逻辑
3. 使用 Promise 来管理异步操作的状态
4. 通过 resolve/reject 来控制流程，而不是简单的返回 false

总结

SweetAlert2 的加载器功能为提升用户体验提供了很好的支持，但需要开发者正确理解其工作流程。避免在 preConfirm 中立即返回 false，转而使用 Promise 进行异步控制，可以确保加载动画按预期工作。这种模式也符合现代前端开发中异步操作处理的最佳实践。