How can I build a repeating Promise .then clause?

Question

How can I repeat a .then clause as a loop? I need to wait for the .then clause promise to resolve, and then if the exit criteria has not been met, I need to repeat the same operation again ... until the exit criteria is met.

My use case is a repeating ajax GET call for multiple "pages" of data until all the data has been retrieved.

I can simplify and simulate the issue as follows. This is the .then clause that I would love to .thenRepeat:

  .then(function(retData) {
      namesList.push.apply(namesList, retData); // accum data into list
      queryParms.pageNo++;                      // set to next page
      return pretendAjaxFnc(queryParms);        // get next page
  })

And this is a runnable example:

function pretendAjaxFnc(obj) {
  return Promise.resolve().then(function() {
    if (obj.pageNo < 6) { // create a pretend "I'm done" point.
      // return a couple dummy records
      return [{  fld1: "data1",  fld2: "data2" }, 
              {  fld1: "data1",  fld2: "data2" }];
    } else {
      // this is the exit criteria
      // It will actually be 404 http status converted to a custom exception
      throw new Error("NO-MORE-DATA");
    }
  });
};

function clientAccumulator() {
  var namesList = [];
  var queryParms = {
    pageNo: 1
  };

  return pretendAjaxFnc(queryParms)
    .then(function(retData) {
      namesList.push.apply(namesList, retData); // append data to list
      queryParms.pageNo++; // set to get next page
      console.log("EIC.GTEST11 list.len: ", namesList.length);
      return pretendAjaxFnc(queryParms);
    })
    // repeat until some exit criteria - like an exception
    .then(function(retData) {
      namesList.push.apply(namesList, retData);
      queryParms.pageNo++;
      console.log("EIC.GTEST21 list.len: ", namesList.length);
      return pretendAjaxFnc(queryParms);
    })
    // repeat until some exit criteria - like an exception
    .then(function(retData) {
      namesList.push.apply(namesList, retData);
      queryParms.pageNo++;
      console.log("EIC.GTEST31 list.len: ", namesList.length);
      return pretendAjaxFnc(queryParms);
    })
    // repeat until some exit criteria - like an exception
    // ...
    .catch(function(ex) {
      if (ex.message === "NO-MORE-DATA") {
        return namesList;
      } else {
        throw ex;
      }
    });
};

clientAccumulator(); // Run the function

This is Browser code that needs to run on current iOS/Safari & Firefox (though preferably more variations). I'm using AngularJS, but I believe I've removed any of that specificity.

Does anyone have a .thenRepeat they can point me to?

Perhaps [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) is your friend, if you are able to use it (either native or babel)? — Xotic750, Apr 11 '18 at 19:01

score 2 · Accepted Answer · edited Apr 12 '18 at 02:09

Just put the then chain into afunction, so that it is recursive:

  function recurse() {
    return pretendAjaxFnc(queryParams)
      .then(function(retData) {
         namesList.push(...retData);
         queryParms.pageNo++;
         return recurse();
    });
 }

Working example:

function pretendAjaxFnc(obj) {
  return Promise.resolve().then(function() {
    if (obj.pageNo < 6) { // create a pretend "I'm done" point.
      // return a couple dummy records
      return [{  fld1: "data1", fld2: "data2" }, 
              {  fld1: "data1", fld2: "data2" }];
    } else {
      // this is the exit criteria
      // It will actually be 404 http status converted to a custom exception
      throw new Error("NO-MORE-DATA");
    }
  });
};

function clientAccumulator2() {
  var namesList = [];
  var queryParms = {
    pageNo: 1
  };
  console.log("TEST00 list.len: ", namesList.length);

  function recurse() {
    return pretendAjaxFnc(queryParms)
      .then(function(retData) {
        namesList.push(...retData);
        console.log("TEST01 list.len: ", namesList.length);
        queryParms.pageNo++;
        return recurse();
      });
  }

  return recurse()
    // repeat until some exit criteria - like an exception
    .catch(function(ex) {
      if (ex.message === "NO-MORE-DATA") {
        return namesList;
      } else {
        throw ex;
      }
    });
};
clientAccumulator2(); // Run the function

Thanks @JonasW, I love your answer. I edited it adding a working example. — GaryL, Apr 12 '18 at 00:06
I realize this is a really old post, but curious if someone has implemented this recursive scheme using observables, perhaps with rxjs takeWhile operator? — coder101, Mar 27 '22 at 14:57

score 1 · Answer 2 · answered Apr 11 '18 at 19:01

Recursion is your friend.

After re-reading again, it seems that this might be more what you're looking for:

repeatPromiseUntil({
    promiseMethod,
    doneConditionMethod,
    waitInterval = 100
}){
    return promiseMethod()
        .then((result) => {
            if (doneConditionMethod(result)) {
                return this.$q.resolve(result);
            }

            return this.$timeout(waitInterval)
                .then(() => this.repeatPromiseUntil({promiseMethod, doneConditionMethod, waitInterval}));
        });
}

Here's an example from my own code (It's rewritten from Typescript for this answer, so there might be a typo or two)

function retryPromise({
    maxRetries,
    promiseMethod,
    successConditionMethod,
    retryInterval,
    increaseInterval = true
}) {
    if (increaseInterval) {
        retryInterval = retryInterval + 1000;
    }

    return promiseMethod().then((result) => {
        if (successConditionMethod(result)) {
            return $q.resolve(result);
        } else if (maxRetries > 0) {
            return $timeout(retryInterval)
                .then(() => {
                    return retryPromise({
                        maxRetries: maxRetries - 1,
                        promiseMethod,
                        successConditionMethod,
                        retryInterval,
                        increaseInterval
                    });
                });
        } else {
            retryInterval = 0;
            return $q.reject();
        }
    });
}

Edit: I've added some angular-specifics that I've used myself (missed the comment about angular initially)

How can I build a repeating Promise .then clause?

2 Answers2