Request Angularjs being executed first incorrectly

Asked

Viewed 76 times

1

In a controller, I have two HTTP requests:

function findProfessionalEmail(professional) {
           EmailHunter.findProfessionalEmail(professional.company_name, professional.first_name,
                 professionalLastName).then(function (data) {
                    var score = data.data.data.score;

                    if (isProfessionalEmailScoreHigh(score)) {
                        vm.professional.email = data.data.data.email;
                    }
            });
        }

and

function checkAvailability(professional, callback) {
            findProfessionalEmail(professional);

            var cb = callback || angular.noop;
            CheckAvailability.save(getCheckAvailabilityDTO(vm.professional), function () {
                    console.log('Success!');
                    return cb();
            }, function (err) {
                console.log('Erro!');
                return cb(err);
            }).$promise;
        }

When invoking the second method "checkAvailability()", the system does not execute my request of the method "findProfessionalEmail()" before, and always executes the request of the method "checkAvailability()" first.

Why are you acting like this? How can I fix it?

javascript angularjs rest http
  • 1

    The findProfessionalEmail method of Emailhunter awaits the answer of a Promise (which may take a while), whereas the "save" of "Checkavailability" passes a callback that runs on time. Apparently the way is to place a call to checkAvailability() in the Promise response.

1 answer

4


The problem is that you are getting lost in the concept of async calls.

See both EmailHunter.findProfessionalEmail and CheckAvailability.save make HTTP calls which by default are asynchronous calls, so you do not guarantee order of calls as you did, and it seems findProfessionalEmail is doing more processing than the CheckAvailability.save therefore the response of save arrives first.

What you need to do is call CheckAvailability.save within the .then of the call of EmailHunter.findProfessionalEmail so you make use of the concept of Promises of angular.

The best thing to do would be

function checkAvailability(professional, callback) {

            var cb = callback || angular.noop;
            CheckAvailability.save(getCheckAvailabilityDTO(vm.professional), function () {
                    console.log('Success!');
                    return cb();
            }, function (err) {
                console.log('Erro!');
                return cb(err);
            }).$promise;
        }

function findProfessionalEmail(professional, checkAvailabilityCallBack) {
           EmailHunter.findProfessionalEmail(professional.company_name, professional.first_name,
                 professionalLastName).then(function (data) {
                    var score = data.data.data.score;

                    if (isProfessionalEmailScoreHigh(score)) {
                        vm.professional.email = data.data.data.email;
                    }

                    checkAvailabilityCallBack(vm.professional)
            });
        }

And call it that:

findProfessionalEmail(professional, checkAvailability);

Browser other questions tagged javascript angularjs rest http

You are not signed in. Login or sign up in order to post.