Question

我有一个ajax请求，它抓取一些数据，然后将其拆分为一个数组。数组长度是可变的。

  var ajax1 = $.ajax({
    url: 'myurl.php',
    type: "GET",
    dataType: "jsonp",
    success: function (data) {

      //create an array

    }

  });

一旦我拥有了数组，我想循环遍历它，并在每次迭代中运行另一个AJAX请求。我把它放在$ .when里面以确保初始ajax请求完成：

  $.when(ajax1).done(
    function() {

      for (i = 0; i < array.length; ++i) {

        $.ajax({
          url: 'anotherurl?=' + myarray[i],
          type: "GET",
          dataType: "jsonp",
          success: function (data) {

            //do stuff here

          }
        });

      }

    }
  )

我的问题是，当for循环完成所有AJAX请求时，如何弹出一个消息框？在循环结束时，一个简单的alert('complete')在AJAX完成异步时无法正常工作。

Answer 1

从JQuery 1.5开始，$.ajax()返回一个实现promise接口的对象，因此您可以将所有这些promises存储在一个数组中，并等待它们使用Promise.all()完成。

类似的东西：

  var root = 'http://jsonplaceholder.typicode.com';
  var p = [];

  p.push( $.ajax({url: root + '/posts/1', method: 'GET'}));
  p.push( $.ajax({url: root + '/posts/2', method: 'GET'}));
  p.push( $.ajax({url: root + '/posts/3', method: 'GET'}));
  p.push( $.ajax({url: root + '/posts/4', method: 'GET'}));

  Promise.all(p).then(values => { 
    console.log( 'Ajax responses after they have all finished: ', values); 
  });

有关示例，请参阅此plnkr。

希望这有帮助！

Answer 2

您也可以使用$.when来实现这一目标。您只需要将您在阵列中生成的所有AJAX请求以及apply()该数组存储到$.when。试试这个：

$.when(ajax1).done(function() {
    var requests = [];
    for (i = 0; i < array.length; ++i) {
        requests.push($.ajax({
            url: 'anotherurl?=' + myarray[i],
            dataType: "JSONP",
            success: function (data) {
                // do stuff here
            }
        }));
    }
    $.when.apply($, requests).done(function() {
        console.log('complete');
    });
})

您也可以使用map()稍微缩短逻辑，但要注意这在＆lt; IE9。

$.when(ajax1).done(function() {
    var requests = array.map(function() {
        return $.ajax({
            url: 'anotherurl?=' + myarray[i],
            dataType: "JSONP",
            success: function (data) {
                // do stuff here
            }
        });
    });
    $.when.apply($, requests).done(function() {
        console.log('complete');
    });
})

Answer 3

jQuery将很快在这里顽强地抓住它。我建议你找到像Promises这样的更好的东西，让你在这种情况下更好地控制

const pajax = opts=>
  new Promise((resolve, reject)=>
    $.ajax(opts).done(x => resolve(x)).fail((_,_,err)=> reject(err))

然后您可以像Promise.all

一样使用它

pajax({
  url: 'myurl.php',
  type: "GET",
  dataType: "jsonp",
})
.then(data => {
  // create your arr
  let arr = ...

  return Promise.all(arr.map(x=> {
    return pajax({
     url: 'anotherurl?=' + x,
     type: "GET",
     dataType: "jsonp"
    })
  }))
})
.then(data => {
  console.log('this is called after all promises are done'
})
.catch(err=> {
  console.error(err)
})

修改

@ RoryMcCrossan的答案很好，如果你想把所有内容保存在jQuery领域

当所有AJAX请求完成时

3 个答案: