AJAXはループ内で呼び出します

Question

私は自分のビューに入れているデータのリストを持っており、各リストアイテムにはIDがあります。

これらのリスト項目のそれぞれは棒グラフであり、少なくとも1人のユーザーが行くバーごとに作成されたドキュメントがあります。ユーザーがいないバーでは、作成されたドキュメントはありません。

私は文書が存在する場合、どのように多くのユーザーがに従って行っている）文書はそのリスト項目 IIのために存在している場合）

私を確認するために、データベースへの各リスト項目のためのAJAX呼び出しを行う必要があります資料。

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

は私がやろうとしています何をやって行くには良い方法があり、そのため、

Request entity too large

のですか？私は約束を使うべきですか？または、whileループ内からAJAX呼び出しを行う方法でエラーが発生しているだけですか？

は参考のため、ここではそれはあなたが内の非同期呼び出しを行うことができ、それぞれの方法を持っている、あなたが非同期と呼ばれるNPMライブラリをチェックアウトする必要があります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); 
    } 
}; 

Answer 1

です。約束を使用する場合、BluebirdのPromise.allメソッドは非常に便利です。

Answer 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-グループ」クラスを持つdiv要素を選択してから、そのdiv要素内の各ボタンを反復処理されるのですjQueryの各演算子を使用します。次に、AJAXリクエストを作成し、success chainコールバックを使用して返されたデータにアクセスします。