在循环内重复进行ajax调用，直到满足条件 [英] Make repeated ajax calls inside loop until condition is met

问题描述

我正在调用已实现分页的API. API的响应是

I am calling an API which has pagination implemented. The response from the API is

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

在请求中指定了分页键的值，并且分页键的响应值成为下一个请求的分页键. 对于第一个请求，分页键的值将为null，响应中的分页键的最终值将为null.因此，从本质上讲，我必须使用分页键值为null的API进行调用，然后无论响应中得到的分页键值如何，都将其用于第二个请求，并继续进行下去，直到响应中键的值变为空为止.

The value for the pagination key is specified in the request, and the response value for pagination key becomes the pagination key for the next request. The value for pagination key will be null for the first request, and the final value of pagination key in the response will be null. So essentially I have to call the API with pagination key value of null, then whatever value of pagination key I get in response, use that for second request and keep continuing until the value of the key in the response becomes null.

我的问题是我正在使用JQuery对此API进行ajax调用

My problem is I am making ajax call using JQuery to this API like

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是我定义的方法

with successCallBack and failureCallBack being methods that I have defined

现在进行Ajax调用，并且随后的回调在JS中是异步的，我很难在一个循环中发出这些请求，并且当响应paginationKey变为null时，很难退出该循环. 我该如何实现?

Now the Ajax call, and the subsequent callbacks being asynchronous in JS, I am having difficulty to make these requests in a loop, and break out of this loop when the response paginationKey becomes null. How can I achieve this?

推荐答案

由于在启动新呼叫之前需要等待呼叫结束，因此可以使用标准循环.一种简单的解决方案是在调用完成后调用API，并且密钥不是null:

Since you need to wait for a call to finish before initiating a new call, you can use a standard loop. A simple solution is to call the API once a call is done, and the key is not 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 .对于不是null的每个键，我们将键添加到数组中.如果数组中有键，我们将进行api调用，并将结果添加到results数组中.

If you need an array of pages, you can use async/await in a for...of loop. For every key that is not null, we add the key to the array. If there's a key in the array, we make an api call, and add the result to the results array.

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

这篇关于在循环内重复进行ajax调用，直到满足条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！