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

时间:2017-01-15 01:18:40

标签: javascript jquery ajax jsonp

嘿我想实现能够使用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);
}

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

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

1 个答案:

答案 0 :(得分:2)

我相信你的问题可以通过使用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>