如何在 jquery 中使用 Promise？

Question

我通过多个 ajax 调用拉入多个 div。在第一个 ajax 调用之前，我想显示一个加载微调器。一旦加载了所有 div（这将花费未知时间），我想对它们进行排序。最后我想删除加载微调层。

我认为我需要为此使用 Promise（因为有多个 ajax 调用）但是我不明白如何实现 Promise - 有人可以告诉我如何编写 Promise 以及我是否需要向我的与此相关的功能请问要添加什么？

非常感谢。

这是我的代码：

$(document.body).on('click', "#refresh_view", function(){

    start_spinner();
    load_all_divs(list_of_ids_to_loop_over);

    // once the above is complete
    re_order_divs();

    // once the above is complete
    end_spinner();

});


load_all_divs(list_of_ids_to_loop_over) {

    $.each(list_of_application_ids.split(','), function(index){
        do_ajax_call_for_this_one_item(this)
    });
};

Answer 1

如果您使用 jQuery 的 $.ajax（或 $.get 等）加载 div，则可以使用 jQuery 的 $.when，因为它们已经返回 jQuery jqXHR 对象，它们类似于 promise：

$.when(
    $.ajax(/*...*/),
    $.ajax(/*...*/),
    $.ajax(/*...*/)
)
.done(() => {
    // All done
})
.fail(error => {
    // Something went wrong
});

如果您使用的是最新版本的 jQuery，您也可以使用标准的 Promise.all，因为现代版本的 jQuery 中的 jqXHR 对象是thenable。 Promise.all 接受一个数组：

Promise.all([
    $.ajax(/*...*/),
    $.ajax(/*...*/),
    $.ajax(/*...*/)
])
.then(() => {
    // All done
})
catch(error => {
    // Something went wrong
});