循环内的 AJAX 调用答案

【问题标题】：AJAX calls inside a loop循环内的 AJAX 调用
【发布时间】：2017-02-25 23:50:45
【问题描述】：

所以，我有一个要放在视图中的数据列表，每个列表项都有一个 id。

这些列表项中的每一个都是一个栏，我为每个栏创建了一个文档，至少有一个用户要去。对于那些没有用户去的酒吧，没有创建文档。

我需要对数据库中的每个列表项进行 AJAX 调用以进行检查

i) 如果存在该列表项的文档 ii) 如果一个文档存在，有多少用户正在根据该文档进行。

我尝试了一个使用 while 循环的解决方案，其中 while 循环的更新包含在 AJAX 调用的回调中。这是代码

function updateAllGoingButtons(){
    var i = 0;
    var dataToPass = {};
    var numButtons = global_data_object.listData.businesses.length;
    while(i < numButtons){
        dataToPass.button = global_data_object.listData.businesses[i].id;
        dataToPass = JSON.stringify(dataToPass);
        ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', '/update-buttons', dataToPass, function(data){
            console.log(i);
            i++;
        }));
    }
}

当我尝试运行该函数时，我得到了错误，

请求实体太大

那么，有没有更好的方法来做我想做的事情？我应该使用承诺吗？或者我试图从一个while循环中进行AJAX调用的方式只是一个错误？

供参考，这里是ajaxRequest函数

'use strict';

var appUrl = window.location.origin;
var ajaxFunctions = {
   ready: function ready (fn) {
      if (typeof fn !== 'function') {
         return;
      }

      if (document.readyState === 'complete') {
         return fn();
      }

      document.addEventListener('DOMContentLoaded', fn, false);
   },
   ajaxRequest: function ajaxRequest (method, url, data, callback) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            callback(xmlhttp.response);
         }
      };

      xmlhttp.open(method, url, true);
      xmlhttp.setRequestHeader('Content-type', 'application/json');
      xmlhttp.send(data);
   }
};

【问题讨论】：

是的，考虑使用 Promise...Promise 始终是处理 ajax 调用的最佳方式
您收到的错误 Request entity too large 与您的 while 循环无关。即使您使用其他机制，它也会出现。
@vijayP - 所以即使我使用异步库，我仍然会得到同样的错误？
我相信是的。该错误与上传大小有关。请先检查相关配置。
@vijayP - 抱歉，您的意思是先检查相关配置？

标签： javascript jquery ajax node.js express

【解决方案1】：

您应该查看名为 async 的 npm 库，它有一个可以在其中进行异步调用的 each 方法。如果您使用 Promise，Bluebird 中的 Promise.all 方法可能对您非常有用。

【讨论】：

【解决方案2】：

所以，这就是我在一个循环中执行多个 AJAX 调用的方法。我使用了这个资源https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f#.d7ymg99mp（很棒的资源！）

这是代码

$('.btn-group').find('button').each(function() {
        console.log($(this).attr('id'));
        dataToPass.button = $(this).attr('id');
        var ajax = $.ajax({
            url: '/update-buttons',
            method: 'post',
            data: dataToPass,
            dataType: 'json',
        }).success(function(data){
            console.log(data);
        });
    });

本质上，它的作用是选择一个具有“btn-group”类的 div，然后使用 jQuery each 运算符遍历该 div 中的每个按钮。然后只需发出 AJAX 请求并使用成功链回调来访问返回的数据。

【讨论】：