如何在 JQuery When - Then 语句中循环遍历 Ajax 请求？

IT技术 javascript jquery ajax
2021-02-24 04:34:44

我正在尝试从 API Async 加载一堆数据，当加载所有数据时，我想触发一个加载所有数据的事件。我遇到的问题是我使用的 API 将响应对象的数量限制为五个。我可能需要检索 30-40 个响应对象。

所以我想要做的是创建一个 when - then 语句，它循环遍历数据项并对每五个项目提出请求，然后当所有项目都被加载时，我想触发一个加载的事件。我遇到的问题是 when-then 语句在 ajax 请求成功之前完成。

到我试过的代码上。 

 function loadsLotsOfStats(stats, dataType, eventName, dataName, callback) {
     var groupedStats = [];
     while (stats.length > 0) {
         groupedStats.push(stats.splice(0, 5).join('/'));
     }
    j$.when(
        groupedStats.forEach(function (d) {
            loadJSONToData(model.apiUrl.replace("{IDS}", d), "json", "", dataName, function (d) { /*console.log(d);*/ }, true)
        })
    ).then(function () {
        j$(eventSource).trigger('dataLoaded', eventName);
    });

loadJSONToData 函数基本上只是一个 Async $.ajax 的包装函数。

所以是的，事件在实际加载数据之前被触发。同样出于某种原因，如果我尝试将 for 循环放在 when( 通过语法错误声明它？

有没有人对我如何发出一堆 Ajax 请求并等到它们全部完成后再触发事件有什么建议？或者去修理我目前拥有的东西？

在此先感谢您的帮助。

2个回答

有可能做你所要求的。但是，您向其发送请求的服务器可能有其强制执行限制的原因。作为一名从事 Web 开发工作并亲眼目睹 DDOS、抓取和其他 API 滥用有多烦人的人，我建议遵守他们的限制。

话虽如此，这是您的方法。

$.ajax 实际上返回一个延迟对象，因此您可以利用它来发挥自己的优势。另外 $.when 可以接受任意数量的延迟对象。结合这两个事实可以解决您的问题。

var deferreds = [];
$.each(groupedStats, function(index, stat){
    deferreds.push(
        // No success handler - don't want to trigger the deferred object
        $.ajax({
            url: '/some/url',
            data: {stat: stat},
            type: 'POST'
        })
    );
});
// Can't pass a literal array, so use apply.
$.when.apply($, deferreds).then(function(){
    // Do your success stuff
}).fail(function(){
    // Probably want to catch failure
}).always(function(){
    // Or use always if you want to do the same thing
    // whether the call succeeds or fails
});

请注意，这不是竞争条件。尽管 $.ajax 是异步的，但 $.each 不是，因此您的延迟列表将是您到达 $.when 之前的总列表，而 $.then/$.fail/$.always 只会在它们全部完成后触发.

编辑：我忘记添加 5s 的拆分，但这说明了总体思路。您可能可以从这里找出如何将其应用于您的问题。顺便说一句，您可以使用 array.splice(0,5) 从数组中获取接下来的 5 个结果。.splice 使用安全；如果元素总数小于 5，它只会取所有剩余的元素。

如果我遗漏了，我很抱歉，但是您如何捕捉和评估响应
2021-04-21 04:34:44
then 函数参数将包括集体响应。
2021-04-22 04:34:44
很好的解释！奇迹般有效。
2021-04-26 04:34:44
对于第一个 ajax 帖子，always() 只调用一次。当循环中的所有调用都完成时，无论成功与否，我如何才能捕获？
2021-05-01 04:34:44
竖起大拇指，这完全符合我的需要。很好的答案和很好的解释。谢谢你的时间。是的，我会研究一种不同的方式来访问我需要的数据，因为你的权利限制是有原因的。
2021-05-14 04:34:44

您可以使用Async.js 库。并尝试每个功能。

其它你可能感兴趣的问题
上一篇如何将文本区域中每行的字符数限制为固定值 下一篇redux fetch body 不用于无 cors 模式