如何等待ajax调用才能完成下一步?

时间:2018-06-12 14:52:09

标签: jquery ajax promise

我遇到需要发出多个ajax请求的情况。我需要访问的URL包含在listOfUrls数组中的字符串中。

我想做的是制作一个ajax请求,处理它,将数据反馈回我的应用程序,然后转到下一个。

我现在得到的代码的基本版本是

var fetch = function(url) {
  $.get(url, function(response) {
    // do stuff with the data
  };
  return someData;
};

for(let i = 0; i < listOfUrls.length; i++) {
  fetch(listOfUrls[i]);
  console.log("Fetching " + listOfUrls);
};

// do more stuff after all requests are finished

这里的问题是这些是异步请求,虽然我可能只是使用同步请求,但我并不想冒这个风险 - 然后我就无法使用{{1在循环中,因为浏览器会挂起。

我更喜欢做的是使用承诺迭代循环:

console.log

Promise显然不能通过var fetch = function(url) { $.get(url, function(response) { // do stuff with the data }; return someData; }; for(let i = 0; i < listOfUrls.length; i++) { fetch(listOfUrls[i]).done( /* move onto the next one */ ).fail( /* throw an error */ ); console.log("Fetching " + listOfUrls); }; // do more stuff after all requests are finished 循环强制迭代。

我将如何实施此行为?

1 个答案:

答案 0 :(得分:2)

您可以使用递归在成功完成上一个URL时调用下一个URL。

  

如果我希望fetch()也将数据返回给调用它的脚本部分,我该怎么做?

由于所有请求都是异步的,因此无法返回任何内容。要执行您需要的操作,您可以使用从所有请求中检索的数据填充数组,然后将其提供给您在完成所有请求时调用的另一个函数,如下所示:

var obj = [];

function makeRequest(index) {
  $.get(listOfUrls[index || 0], function(response) {
    // do stuff with the response
    obj.push(response);

    if (++index < listOfUrls.length) {
      makeRequest(index);
    } else {
      finaliseRequests(obj);
    }
  });
}

function finaliseRequests(data) {
  // work with all the received data here...
}

makeRequest(); // onload