带有ajax请求的jQuery .each循环

Question

我是新来的。

$.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。

谢谢

Answer 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 })
}));

Answer 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>

Answer 3

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

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

Answer 4

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

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