javascript - 在循环内重复进行 ajax 调用，直到满足条件

Question

我正在调用一个已实现分页的 API。 API 的响应是

{
  data {
    field1 : "value1",
    field2: "value2",
  },
  paginationKey : {
    id: "value for id",
    some_other_field: "value for other field"
  }
}

分页键的值在请求中指定，分页键的响应值将成为下一个请求的分页键。 第一次请求时分页键的值为空，响应中分页键的最终值为空。因此，本质上我必须使用分页键值为 null 来调用 API，然后无论我在响应中获得什么分页键值，都将其用于第二个请求并继续继续，直到响应中的键值变为 null。

我的问题是我正在使用 JQuery 对该 API 进行 ajax 调用，例如

let ajaxPromise = $.ajax({
  url: requestUrl,
  type: 'GET',
  data: requestData, // containing the paginationKey like I mentioned above
  // other parameters for AJAX call like crossdomain, timeout etc
})

ajaxPromise.then(function(data) {
  successCallBack(data);
}, function(error, errorMessage) {
  failureCallBack(error, errorMessage)
})

successCallBack 和 failureCallBack 是我定义的方法

现在，Ajax 调用以及后续回调在 JS 中是异步的，我很难在循环中发出这些请求，并且当响应 paginationKey 变为 null 时，无法跳出此循环。 我怎样才能实现这个目标？

Answer 1

由于您需要等待调用完成才能发起新调用，因此可以使用标准循环。一个简单的解决方案是一旦调用完成就调用 API，并且 key 不为 null:

const repeatedAPICall = (requestData, successCallBack, failureCallBack) => {
  const ajaxPromise = $.ajax({
    url: requestUrl,
    type: 'GET',
    data: requestData, // containing the paginationKey like I mentioned above
    // other parameters for AJAX call like crossdomain, timeout etc
  })

  ajaxPromise.then((data) => {
    successCallBack(data)

    if(data.paginationKey) {
      repeatedAPICall(data.paginationKey, successCallBack, failureCallBack)
    }
  }, (error, errorMessage) => {
    failureCallBack(error, errorMessage)
  })
}

// 1st call
repeatedAPICall(null, successCallBack, failureCallBack)

如果您需要页面数组，可以使用async/await在 for...of 循环中。对于每个非 null 的键，我们将键添加到数组中。如果数组中有键，我们将进行 api 调用，并将结果添加到 results 数组中。

async function repeatedAPICall(
  apiCall,
  startValue
) {
  const keys = [startValue];
  const result = [];

  for (const callKey of keys) {
    const data = await apiCall(callKey);

    result.push(data);

    if (data.key !== null) keys.push(data.key);
  }

  return result;
}

// mock api call
const apiCall = ((counter) => () => Promise.resolve({
  key: counter < 5 ? counter++ : null
}))(0);

repeatedAPICall(apiCall, null)
  .then(result => console.log(result)); // use your callbacks here