Ajax 调用 for 循环答案

【问题标题】：Ajax calls in for loopAjax 调用 for 循环
【发布时间】：2020-09-01 21:32:48
【问题描述】：

我有如下所示的函数，它只是向数组中的一堆端点发出请求。现在我让 Ajax 调用同步（而不是原生异步）。

这是因为虽然在异步时它确实会循环遍历 url 并正确进行调用，但我设置为变量 'name' 的 API 名称将只显示列表中的姓氏：

什么时候应该这样显示（只有当我将 Ajax 调用设置为同步时才会显示）：

我很确定这是因为来自 ajax 调用的线程可能需要任何给定的时间才能完成，而 for 循环之前已经完成了它的迭代，因此列表中只有 las 名称用于显示.

如何在保持呼叫异步的同时将名称与每个呼叫的响应同步？

谢谢。

function isAlive(service) {
    var buildIsAliveBox = function (isAlive, name, xhr) {
        var isAliveOuterCnt = $('#isAliveOuterCont' + service);
        var applyClass = isAlive ? 'alive' : 'dead';
        var status = xhr.status == 0 ? 'Failed' : xhr.status;
        var xhrMessage = handleHttpResponse(xhr);
        var isAliveBox = $('<div class="' + applyClass + ' isAliveBox" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="' + xhrMessage + '"><p class="svrName">' + name + '</br>' + status + '</p></div>');
        isAliveOuterCnt.append(isAliveBox);
    };

    var svce = service.toLowerCase();
    for (var i = 0; i < environments.qa[svce].healthUrls.length; i++) {
        var data = environments[envSwitch][svce].healthUrls[i];
        var name = data.split(',')[0];
        var url = data.split(',')[1];

        $.ajax({
            url: url,
            type: 'GET',
            async: false,
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json',
            },
            success: function (data, status, xhr) {
                buildIsAliveBox(true, name, xhr);
            },
            fail: function (xhr, textStatus, errorThrown) {
                buildIsAliveBox(false, name, xhr);
            },
            error: function (xhr, status, err) {
                buildIsAliveBox(false, name, xhr);
            }
        });

    }
}

【问题讨论】：

效果很好，谢谢！

标签： ajax for-loop asynchronous

【解决方案1】：

将var 更改为let，至少对于name（但理想情况下也可用于其他变量，以避免以后再次遇到此问题）。

var 是函数作用域而不是块作用域，因此每次迭代都会重用相同的 data、name 和 url 变量。并且来自 AJAX 调用的响应在您的循环完成运行很久之后才返回，因此到那时这些变量将具有它们上次分配的值（在循环的最后一次迭代中）。

使用let，每次迭代都会获得一个新范围，因此每次 AJAX 调用都会获得不同的 name 变量等，它会在回调中访问。

【讨论】：