連続したAJAXコールの代わりに "async：false"の代わりに

Question

2つの異なるソースからデータを取得するために2つのAJAX GETリクエストを使用しています。
各リクエストで、レスポンスデータを解析し、関連する各データを含む一時的な配列を作成し、この一時的な配列をマスター配列にプッシュします。
しかし、これは、をAJAXリクエストに含めると機能しますが、現在は廃止予定です。
このコードを書く方法がありますか？ （注：このコードスニペットで2つのAJAXリクエストを使用していますが、私が作業しているプロジェクトでは合計4つ使用する必要があります）。

function get_results() { 
    $(document).ready(function() { 
    var master_array = []; 
    $.ajax({ 
     type: "GET", 
     url: "http//:www.source1.com", 
     dataType: "xml", 
     async: false, 
     success: function(xml) { 
     $(xml).find('product').each(function() { 
      var Average = $(this).find('Average').text(); 
      var Price = $(this).find('Price').text(); 
      var Name = $(this).find('Name').text(); 
      var Url = $(this).find('Url').text(); 
      var Image = $(this).find('Image').text(); 
      master_array.push([Average, Price, Name, Url, Image]); 
     }); 
     } 
    }); 
    $.ajax({ 
     type: "GET", 
     url: "http//:www.source2.com", 
     dataType: "xml", 
     async: false, 
     success: function(xml) { 
     $(xml).find('product').each(function() { 
      var Average = $(this).find('Average').text(); 
      var Price = $(this).find('Price').text(); 
      var Name = $(this).find('Name').text(); 
      var Url = $(this).find('Url').text(); 
      var Image = $(this).find('Image').text(); 
      master_array.push([Average, Price, Name, Url, Image]); 
     }); 
     } 
    }); 
    }); 
} 

Answer 1

これは、JQuery $.promiseオブジェクトを使用することで実現できます。
return $.ajaxには、実際には $.done()と$.whenなどの組み込みメソッドがいくつかあります。

シナリオでは、最初のAjaxリクエストがで完了した後にAjax関数を実行する場合は、となります。

コード内にある2つのAjaxリクエストを表す2つの変数を作成します。
Ajaxリクエストを返すときに先ほど触れたように、実際には$.promiseオブジェクトとして使用し、$.done()関数などの利点を楽しむことができます。

function get_results() { 
    $(document).ready(function() { 
    var master_array = []; 

    var MyFirstFunction = function() { 
     return $.ajax({ 
     type: "GET", 
     url: "http//:www.source1.com", 
     dataType: "xml", 
     success: function(xml) { 
     $(xml).find('product').each(function() { 
      var Average = $(this).find('Average').text(); 
      var Price = $(this).find('Price').text(); 
      var Name = $(this).find('Name').text(); 
      var Url = $(this).find('Url').text(); 
      var Image = $(this).find('Image').text(); 
      master_array.push([Average, Price, Name, Url, Image]); 
     }); 
     } 
    }); 
    }; 

    var MySecondFunction = function(){ 
     return $.ajax({ 
     type: "GET", 
     url: "http//:www.source2.com", 
     dataType: "xml", 
     success: function(xml) { 
     $(xml).find('product').each(function() { 
      var Average = $(this).find('Average').text(); 
      var Price = $(this).find('Price').text(); 
      var Name = $(this).find('Name').text(); 
      var Url = $(this).find('Url').text(); 
      var Image = $(this).find('Image').text(); 
      master_array.push([Average, Price, Name, Url, Image]); 
     }); 
     } 
    }); 
    }; 
//We use it after the assignment of the variables because if would have put it before them we would got undefined, you can read more about it here:[Hoisting][4]. 
     MyFirstFunction().done(MySecondFunction); 
    }); 
    }