jquery - 如何等待 ajax 调用完成然后再进行下一个调用？

Question

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

Promise 显然不能强制通过 for 循环进行迭代。

我将如何实现这种行为？

Answer 1

在成功完成前一个 URL 后，您可以使用递归来调用下一个 URL。

If I wanted fetch() to also return data back to the part of the script that called it, how would I do that?

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

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