Roberto Milani Roberto Milani - 3 months ago 11
AngularJS Question

Wait until a callback ends to continue execution in Angular

I'm having some problems understading how the callbacks work.
I'm writing a function that has to validate the user's input.
Inside the function I have to make an HTTP GET call to my API to perform a check based on the user input.

The problem is that the validate function is called from the process function and submit function is called before the HTTP call that I make inside validate().
I cannot edit process function because it is a function used by other components.

form.process = function(){
// do stuffs
validate();
submit();
}

form.validate = function () {
// lots of checks regarding the model
...
// HTTP GET call
}


Is it possible to let the submit function waits until the HTTP GET call inside validate() ends?

Thanks in advance :)

Answer

You MUST modify validate to return a promise like this:

form.validate = function () {
    var deferred = $q.defer();
    // lots of checks regarding the model
    ...
    // In http GET call:
    // If success
    deferred.resolve(<any value>);
    // If errors
    deferred.reject(<any value>);
    // and now return the promise
    return deferred.promise;
}

Now you CAN do anything you want in process function like this:

form.process = function(){
   // do stuffs
   validate().then(function(response){
      submit();
   }, function(reject){
      // do something like showing error.
   });
}

If you have more components that use this function, you MUST edit all like this. Anyway, this is the best way to implement other GET calls in each "validate" function of your components.