javascript - 同步ajax请求未同步处理

Question

我有一个发送多个ajax请求的循环。

当所有这些完成后，我想重新加载我的页面。

$.each(uuids, function (i, e) {
    console.log("Sending request for: " + e)
    $.ajax({
        type: 'GET',
        data: {
            _rnd: new Date().getTime()
        },
        url: addToGroupUrl + '?label=' + encodeURIComponent($("#changeGroupSelect").val()) + '&labelDisplay=' + encodeURIComponent($("#changeGroupSelect option:selected").text()) + '&uuid=' + e,
        dataType: 'json',
        async: 'false',
    });
});

location.reload()

现在我遇到了一些问题，即并非所有请求都被发出。该循环创建所有请求，但一旦 location.reload() 完成，服务器就会停止接收请求。

看起来async: 'false'只准备请求，但它们是异步处理的。

我应该如何思考这里？我想在发送所有请求后重新加载我的页面。

Answer 1

首先，async 属性接受 bool 值，而不是字符串，因此它应该是 async: false。

其次，也是更重要的一点，永远不要使用 async: false。这对于用户体验来说是可怕的，因为它完全阻止了 UI 的更新并使浏览器看起来像是崩溃了。

相反，异步发出所有请求，并将所有 promise 放入一个数组中，您可以在它们全部完成后执行所需的代码之前将其应用到$.when。试试这个:

var requests = [];
var label = $("#changeGroupSelect").val();
var labelDisplay = $("#changeGroupSelect option:selected").text();
$.each(uuids, function (i, e) {
    requests.push($.ajax({
        type: 'GET',
        data: {
            _rnd: new Date().getTime(),
            label: label,
            labelDisplay: labelDisplay,
            uuid: e
        },
        url: addToGroupUrl,
        dataType: 'json'
    }));
});

$.when.apply(this, requests).done(function() {
    window.location.reload()
});

请注意，如果您向 data 属性提供 URL 参数，它们将自动为您进行编码。此外，由于输入的值在请求之间不会更改，因此您可以在循环之外获取它们，以阻止在每次迭代中不必要地查询 DOM。