Using Promises not returning the resolve method in Lightning Component

Question

I am trying to recall the apex method until I get a success response for status of log. Below is the code. checkIntegrationLog function simply check the status of a single Log and I want to call that again if the status is still pending and not complete.

This works fine, but I have called this helper method from controller and I also use .then() function to get the result from Promise but somehow when I get the success result in helper method it doesn't execute the controller stuff I have after.then() function. Any idea how to achieve this or what am I doing wrong here?

Controller.class

handleSubmit : function(component,event,helper){
    this.checkStatus(component,event,helper); //this line throws an error saying Cannot read property 'checkStatus' of undefined.
}, 
checkStatus : function (component,event,helper){
   helper.checkILogStatus(component,shiftRecord.id)
            .then(function(result) {
                console.log(JSON.stringify(result));
                if(result == true){
                    //perform after success things
                    //Here I perform action like submitting the lightning record edit form fields / hiding the spinner/ calling apex method re re-render the records details.
                } else {
                    console.log('else');
                }
                console.log('wait');
                }
            ).catch(
                function(error){
                    console.log(JSON.stringify(error));
                    component.find("sSpinner").set("v.class" , 'slds-hide');
                    helper.showToast(component,error,'error');
                }
            );
}

Helper.class

checkILogStatus : function (component, recId){
    var self = this;
    return new Promise(
        $A.getCallback(function(resolve, reject){
            var action = component.get("c.checkIntegrationLog");
            action.setParams({
             'recordId' : recId
            });
            action.setCallback(this, function(response){
                var state = response.getState();
                if (state === "SUCCESS") {
                    var res = response.getReturnValue(); // This returns a boolean value. 
                    if(res == false){
                        self.checkILogStatus(component,recId);
                    } else{
                        resolve(res);
                   }
                }else if (state === "ERROR") {
                   var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            reject(errors[0].message);
                        }
                    } else {
                        reject("Unknown error! Please try again");
                    }
                }
            });
            $A.enqueueAction(action);
        })
    );
},

Answer 1

Your problem is that you never returned a return value from the original Promise, so it's left hanging. To fix this, you need to call an inner promise loop that can call itself recursively. The following should work:

({
  checkILogStatus: function (component, recordId) {
    let callServer = function () {
      return new Promise(function (resolve, reject) {
        var action = component.get("c.checkIntegrationLog");
        action.setParams({ recordId });
        action.setCallback(this, function (response) {
          if (response.getState() === "SUCCESS") {
            resolve(response.getReturnValue());
          } else {
            reject(response.getError());
          }
        });
        $A.enqueueAction(action);
      });
    };
    return new Promise(
      $A.getCallback(function (resolve, reject) {
        let repeat = function () {
          callServer()
            .then(function (result) {
              // When true, we are done!
              result ? resolve(result) : repeat();
            })
            .catch(function (error) {
              reject(error);
            });
        };
        repeat();
      })
    );
  },
});