連續AJAX調用的“異步：假”的替代方法

Question

我正在使用兩個AJAX GET請求來從兩個不同的來源獲取數據。
在每個請求中，我解析響應數據，為每個項目創建一個與相關數據有關的臨時數組，然后將該臨時數組推送到主數組中。
但是，這僅在我不贊成使用的AJAX請求中包括"async: false"情況下才有效。
有沒有其他方法可以編寫此代碼？ （注意：盡管我在此代碼段中使用了兩個AJAX請求，但是在我正在處理的項目中，我可能總共需要使用四個）。

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函數。

因此，我們將創建兩個變量，它們代表您的代碼中的兩個Ajax請求。
就像我前面提到的，當您返回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);
     });
    }