複数のajaxの代わりにデータレールを取得する

Question

私のページに4個のタブがあります：

MYキュー|今日|フォローアップ|今後の

ページのload i fire 4 ajaxがこれらすべてのタブのコントローラからデータを取得するために呼び出され、データを取得すると、各タブのリストが作成されます。

しかし、ajaxは非同期であるため、私のデータに異常があります。これを達成するためのよりよい方法がありますか？

私は4 AJAXコール以下に似呼び出す必要があり：

$.ajax({ 
        url: '/opd_clinical_workflow/get_appointment_lists', 
        dataType: 'json', 
        data: { 
         current_date: current_date, 
         department_id: current_department, 
         doctor: current_doctor, 
         status: current_status, 
         source: "list", 
         q: $("#search_appointment").val(), 
        }, 
        success: function(res){ 
         console.log(tab,res) 
         _this.updateMyQueueSummary(res,id,tab); 
        }, 
        error: function(err){ 
         console.log(err); 
        } 
       }); 

updateMyQueueSummary：それぞれのタブで プットデータを

createSummaryAppointment： は私のためのHTMLを作成し、updatesummary

Answer 1

チェーンで呼び出されますAJAXはあなたの最高のオプションです：

$.ajax({ 
 
    url: "somewhere/1" 
 
    }) 
 
    .always(function(reponse1) { 
 
    //Do something with the response 
 
    document.write("<p>1</p>"); 
 
    //Then call next part 
 
    $.ajax({ 
 
     url: "somewhere/2" 
 
     }) 
 
     .always(function(reponse2) { 
 
     //Do something with the response 
 
     document.write("<p>2</p>"); 
 
     //Then call next part 
 
     $.ajax({ 
 
      url: "somewhere/3" 
 
      }) 
 
      .always(function(reponse3) { 
 
      //Do something with the response 
 
      document.write("<p>3</p>"); 
 
      //Then call next part 
 
      $.ajax({ 
 
       url: "somewhere/4" 
 
       }) 
 
       .always(function(reponse4) { 
 
       //Do something with the response 
 
       document.write("<p>4</p>"); 
 
       //Now finalize it 
 

 
       document.write("<p>Final</p>"); 
 
       }) 
 
      }) 
 
     }) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

01私は実際のデータを取得するためにどこにもありませんので、私は always代わりの doneを使用しています

注意してください。

Answer 2

すべてのjQuery ajaxメソッドは、promise objectsを返します。これは友人からのIOUメモのようなものです。あなたは今データを持っていませんが、ある時点でデータがあります。

これらは、コードが判読不可能で脆くなるまでajaxコールバックをネストする「コールバックスープ」を避けたい場合に非常に強力なツールです。

var promise = $.ajax('/foo'); 
promise.pipe(function(data){ 
    return $.ajax('/bar?foo=' + data['foo']); 
}); 
promise.done(function(data){ 
    // ajax call to '/bar?foo=' is complete 
}); 

次の2つの約束を組み合わせることjQuery.whenを使用することができます。これは、一度に2つの非同期Ajax呼び出しを開始したいが、続行するには両方の結果が必要なときには本当に便利です。

var calls = $.when($.ajax('/foo'), $.ajax('/bar')); 
calls.done(function(response_a, response_b){ 
// both ajax calls are complete. 
});