如何为Livewire请求添加SweetAlert加载状态，阻止弹窗在请求完成前关闭

嘿，我明白你的困扰！在Livewire里搭配SweetAlert时，确实会碰到这个问题——因为Livewire的方法调用是异步执行的，你原来的代码里点击确认后，@this.call('createRequest')会立刻发送请求，但JS不会等待请求完成，所以SweetAlert的弹窗直接就关闭了，而请求还在后台处理。下面给你两种可行的解决方案，都能让弹窗保持加载状态直到请求完成：

方法一：利用Livewire call方法的Promise特性 #

Livewire的@this.call()方法本身会返回一个Promise，我们可以借助它跟踪请求的完成状态，再动态更新SweetAlert的内容：

document.addEventListener('DOMContentLoaded', function () {
    $('.eg-swal-av3').on("click", function (e) {
        Swal.fire({
            title: 'title',
            text: "content",
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'بله ایجاد کن',
            cancelButtonText : 'لغو',
            allowOutsideClick: false // 防止用户点击外部意外关闭弹窗
        }).then(function (result) {
            if (result.isConfirmed) {
                // 先弹出加载状态的弹窗
                const loadingSwal = Swal.fire({
                    title: 'در حال پردازش...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading() // 显示加载动画
                    }
                });

                // 调用Livewire方法，等待请求完成
                @this.call('createRequest')
                    .then(() => {
                        // 请求成功：关闭加载弹窗，显示成功提示
                        loadingSwal.close();
                        Swal.fire({
                            title: 'موفقیت آمیز!',
                            text: 'درخواست شما با موفقیت ایجاد شد.',
                            icon: 'success'
                        });
                    })
                    .catch(() => {
                        // 请求失败：关闭加载弹窗，显示错误提示
                        loadingSwal.close();
                        Swal.fire({
                            title: 'خطا!',
                            text: 'در ایجاد درخواست مشکلی پیش آمد.',
                            icon: 'error'
                        });
                    });
            }
        });
        e.preventDefault();
    });
});

这种方法的优势是不需要修改Livewire组件的代码，直接在前端就能处理状态流转。

方法二：通过Livewire浏览器事件通知前端 #

如果你希望更灵活地控制状态（比如在组件里处理完复杂业务逻辑后，再根据结果通知前端），可以在Livewire组件中触发浏览器事件，前端监听这个事件来关闭加载弹窗：

第一步：修改Livewire组件的createRequest方法 #

public function createRequest()
{
    try {
        // 这里编写你的业务逻辑，比如创建请求的代码
        
        // 触发成功事件
        $this->dispatchBrowserEvent('requestProcessed', [
            'status' => 'success',
            'message' => 'درخواست شما با موفقیت ایجاد شد.'
        ]);
    } catch (\Exception $e) {
        // 触发失败事件
        $this->dispatchBrowserEvent('requestProcessed', [
            'status' => 'error',
            'message' => 'در ایجاد درخواست مشکلی پیش آمد.'
        ]);
    }
}

第二步：修改前端JS代码 #

document.addEventListener('DOMContentLoaded', function () {
    // 监听Livewire发送的事件
    window.addEventListener('requestProcessed', function(event) {
        // 关闭加载弹窗
        Swal.close();
        
        // 根据事件内容显示对应的提示
        if (event.detail.status === 'success') {
            Swal.fire({
                title: 'موفقیت آمیز!',
                text: event.detail.message,
                icon: 'success'
            });
        } else {
            Swal.fire({
                title: 'خطا!',
                text: event.detail.message,
                icon: 'error'
            });
        }
    });

    $('.eg-swal-av3').on("click", function (e) {
        Swal.fire({
            title: 'title',
            text: "content",
            icon: 'info',
            showCancelButton: true,
            confirmButtonText: 'بله ایجاد کن',
            cancelButtonText : 'لغو',
            allowOutsideClick: false
        }).then(function (result) {
            if (result.isConfirmed) {
                // 显示加载弹窗
                Swal.fire({
                    title: 'در حال پردازش...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });

                // 调用Livewire方法
                @this.call('createRequest');
            }
        });
        e.preventDefault();
    });
});

这种方法适合需要在组件内处理复杂逻辑，再根据不同业务结果给前端差异化反馈的场景。

两种方法都能解决你遇到的问题，你可以根据自己的需求选择其中一种～

内容的提问来源于stack exchange，提问作者Mojtaba Delshad