在显示 SweetAlert2 Toastr mixin 之前等待所有 ajax 调用结束

Question

我正在使用下面的代码在 ajax 请求后显示通知


const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });

//ajax call
$.ajax({
    .....
    success: function(response){
        reloadpanel1(response.id);   //another ajax call
        reloadpanel2(response.id);   //another ajax call
        Toast.fire({
            type: 'success',
            title: response.message,
            customClass: { popup: 'adjust' }
        })
    }
})

问题是通知甚至在 reloadpanel1 和 reloadpanel2 完成他们的请求之前就弹出了。如果所有 ajax 调用尚未完成，是否有一种方法 Toastr 不会触发？

编辑：

$(document).ajaxStart()/.ajaxStop() 不会执行，因为通知消息取决于 json response.message 值

Answer 1

必须尝试异步等待

const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });

//ajax call
$.ajax({
    .....
    success: async function(response){
        await reloadpanel1();   //another ajax call
        await reloadpanel2();   //another ajax call
        Toast.fire({
            type: 'success',
            title: response.message,
            customClass: { popup: 'adjust' }
        })
    }
})

Answer 2

使用 jquery when function

为我的问题找到了一个巧妙的解决方案

const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });

//ajax call
$.ajax({
    .....
    success: function(response){
        $.when(reloadpanel1(), reloadpanel2()).done(function(){
            Toast.fire({
               type: 'success',
               title: response.message,
               customClass: { popup: 'adjust' }
            })
        })
    }
})

在显示 SweetAlert2 Toastr mixin 之前等待所有 ajax 调用结束

Wait for all ajax calls to end before showing SweetAlert2 Toastr mixin

javascript

ajax

sweetalert

sweetalert2