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

Posted 2023-05-08

【中文标题】在循环内进行重复的ajax调用，直到满足条件

【英文标题】：Make repeated ajax calls inside loop until condition is met

【发布时间】：2020-09-20 08:25:21

【问题描述】：

我正在调用一个已实现分页的 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 时跳出这个循环。 我怎样才能做到这一点？

【问题讨论】：

这是通过您可以共享链接的公共 api 吗？您是否希望将所有数据推送到单个数组中？

抱歉，我不能分享这个 API，因为它不是公开的。是的，我想将数据存储在单个数组中，但还要根据每次调用返回的响应更新存储在数组中的结果。

【参考方案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)

如果您需要一个页面数组，您可以在for...of 循环中使用async/await。对于不是null 的每个键，我们将键添加到数组中。如果数组中有key，我们调用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