带有ajax请求的jQuery .each循环

Posted 2023-03-16

【中文标题】带有ajax请求的jQuery .each循环

【英文标题】：jQuery .each loop with ajax request

【发布时间】：2020-06-05 14:03:59

【问题描述】：

我是新来的。

$.each(a, function (i, obj) 
    $('#labelid').html("inserting this data: "+obj.somedata);
    // some other code

    $.ajax(
        // ajax request with insert
    );
);

我有一个 each 循环，其中有一个 ajax 请求，它只插入一些数据，以及一些其他代码，主要用于更改一种“状态”标签（“插入这个：（一些数据）”）。

我的问题是当循环执行时，除了 ajax 请求之外，其中的代码一直迭代到最后，在我的标签中显示类似“插入这个：（最后一个元素行）”，而 ajax 请求仍在运行在后台。

我想实现这样的目标： 1. 标签显示“插入第一组数据” 2. ajax 请求插入第一组数据 3. 标签显示“插入第二组数据” 4.ajax请求插入第二组数据

这可能吗？我不想使用 async: false。

谢谢

【问题讨论】：

那么，你的意思是要延迟循环执行，直到循环内的ajax函数完成？

@palaѕн 是的，我愿意

对于 ajax 选项添加 async: false,

jQuery AJAX函数的异步设置默认值为true

为什么不想使用 async:false？

【参考方案1】：

将您的 ajax 请求包装在一个 Promise 中并使用 await 调用该 Promise，因此代码的执行等待该 Promise 返回 ajax 请求的响应，您可以将标签设置为所需的格式。

const response = await new Promise((accept, reject) => $.ajax(
  url: url,
  type: "POST",
  success: data => accept(data),
  error: (request, status, error) => reject( request, status, error )
));

【参考方案2】：

这里是 jQuery Ajax 上的一个小承诺包装器。我认为它适用于$.each。

const _ajaxAsync = url => new Promise((accept, reject) => $.ajax(
    url: url,
    type: "POST",
    success: data => accept(data),
    error: (request, status, error) => reject( request, status, error )
));

$.each(a, async function (i, obj) 
    $('#labelid').html("inserting this data: " + obj.somedata);
    // some other code

    let res = await _ajaxAsync('https://example.com').catch(e => console.log(e));
    console.log(res);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【参考方案3】：

在这种情况下，for 循环将不起作用，因为请求是异步的。您有 2 个选项。

如果要使用 for 循环，请在 $.ajax 中将 async 设置为 false 采用递归方法，即仅在响应时发送下一个请求 的请求到达。这可以通过创建递归函数来完成。

【参考方案4】：

因为，Ajax 请求 是异步，所以你的循环不会等待它的响应并立即移动到下一个。要将 Ajax 作为 Synchronous 执行，您需要添加以下选项。

$.ajax(
    async: false,
    // your other options
)

【讨论】：

我已经尝试过了，页面只是冻结并插入数据库中的所有内容，完成后它只显示最后插入数据