对于后续的AJAX调用，可以选择“async: false”

I am using two AJAX GET requests to grab data from two different sources.
In each request I parse the response data, create a temporary array with the relevant data each item, and push this temporary array into a master array.
However, this only works if I include "async: false" in the AJAX request, which is now deprecated.
Is there an alternative way I could write this code? (NOTE: Although I am using two AJAX requests in this code snippet, I will probably need to use a total of four in the project I am working on).

我使用两个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]);
        });
      }
    });
  });
}

1 个解决方案

#1

You can achieve this by using a JQuery $.promise object.
When you return $.ajax it's actually has some built-in methods, such as $.done() and $.when.

您可以通过使用JQuery $来实现这一点。承诺对象。当你返回$。它实际上有一些内置的方法，比如$.done()和$ when。

In your scenario you want to execute an Ajax function after the first Ajax request is done.

在您的场景中，您希望在完成第一个Ajax请求后执行Ajax函数。

So we will create two variables that will represent the two Ajax requests you have in your code.
Like I mentioned earlier when you return Ajax request you actually can use it as a $.promise object and enjoy the advantages it has, such as the $.done() function.

因此，我们将创建两个变量来表示代码中的两个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);
     });
    }

#1