使用 jsonp 和相同的回调函数发出多个请求

Question

嘿，我想实现能够使用 jsonp 和相同的回调函数调用多个请求。我目前这样做的方式是设置每次调用之间的间隔，这很可怕，因为如果我想进行 10 次请求调用，则需要 10 秒才能检索所有数据。如果我缩短时间，那么它会返回一个解析错误。

我想知道是否有任何方法可以几乎同时提出这些请求。

这是我的ajax请求调用代码：（相关代码）

  var parameterMap = OAuth.getParameterMap(message.parameters);
  console.log("3");
  $.ajax({
    'url' : message.action,
    'data' : parameterMap,
    'dataType' : 'jsonp',
    'async' : 'true',
    'jsonpCallback' : 'cb',
    'cache': true
  })
  .done(function(data, textStatus) {
    console.log("Coming in");
    var mapIndex = yelpRequestCounter.toString();
    console.log("Map Index being set is: " + mapIndex);
    yelpResults = yelpResults.set(mapIndex, data.businesses);
        console.log("4");
        console.log("Success promise: " + yelpRequestCounter);
        console.log("Ending");
        if(yelpRequestCounter == 9){
          findPriorityResuts(subPoints);
          yelpRequestCounter = 0;
        }
        // console.log('success[' + JSON.stringify(data) + '], status[' + textStatus + ']'); //', jqXHR[' + JSON.stringify(jqXHR) + ']\n');
    }
  )
  .fail(function(data) {
    console.log("Failed")
        // console.log('error[' + errorThrown + '], status[' + textStatus + '], jqXHR[' + JSON.stringify(jqXHR) + ']');
    }
  );

}

我的回调函数只是一个空方法，因为我认为如果我在 promise 中检索了所有数据，那么我就不会出错。（我错了）。

这是发出请求的函数：

var generateBusiness = function(term, subPointResults){
  console.log("generateBusiness is being called");

  var waitForCB = setInterval(function(){
    console.log("CB Counter = " + yelpRequestCounter);
    latlngString = subPointResults[yelpRequestCounter].lat().toString() + "," + subPointResults[yelpRequestCounter].lng().toString();
    yelpSearch(term, latlngString,subPointResults);
    yelpRequestCounter++;
    console.log(yelpRequestCounter + "---------------------");

    if(yelpRequestCounter === subPointResults.length){
      console.log("It stops!");
      clearInterval(waitForCB);
    }

  },1000);
}

如果我缩短了时间或在连接不良的地方，那么这几乎不起作用。

感谢您的时间和帮助！ :)

Answer 1

我相信您的问题可以通过使用 Jquery 的 $when().then() 函数来解决。

这里是您可以使用其中一种方式的示例模板。

 $.when(ajax1(), ajax2().., ajaxN()).then(function(response1, response2,.., responseN){

});

function ajax1() {
  return $.ajax({
    url: "url",
    dataType: "jsonp",
    ...
});
}

function ajax2() {
  return $.ajax({
    url: "url",
    dataType: "jsonp",
    ...
});
}
...

编辑：或者，如果您想使用循环来发出所有 ajax 请求而不是编写多个函数，您可以使用 Function.prototype.apply 属性。例如$.when.apply($, my_array);

这是一个示例模板。

var results = []; // results of all the ajax calls

function getPromises() {
    var promises = [];

    var i = 1;
    for (i = 1; i <= 2; i++) {
        var count = i;

        promises.push(
            $.post('/echo/html/', {
                html: "<p>Task #" + count + " complete.",
                delay: count
            }).success(function(data) {

                results.push(data)
            }));
    }

    return promises;
}

$(function() {
    $("a").click(function() {


        var promises = getPromises();

        $.when.apply(null, promises).done(function() {

            $("div").append("<p>All done!</p>" + results[0] + " | " + results[1]);
        });

    })
})

HTML：

 <a href="#">Make Ajax Requests!</a>
 <div></div>