在继续下一个之前，如何等待ajax调用完成？

时髦的

我遇到需要发出多个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

这里的问题是这些是异步请求，尽管我可能只使用同步请求，但我真的不想冒这个险-然后我将无法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

承诺显然不能强制循环迭代for。

我将如何实施这种行为？

罗里·麦克罗森（Rory McCrossan）

您可以使用递归在成功完成上一个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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。