ganders ganders - 5 months ago 10
AngularJS Question

Angular firing function in then clause before original function

I've got a list of service calls that I can call all at the same time, but I have 1 other call that MUST be called, and completed before the others get fired off. I set this up so the other calls didn't occur until the

.then(function() {})
block of the call. Checking Chrome Dev Tools (and getting confirmation based on the Sql error), all of the calls in the then clause are firing before. What am I doing wrong here?

var promises = [];

if (this.partner.customerId > 0) {
if (this.isDirty('ipn.individualPartnerName')) {
promises.push(this.partnerEditService.updateIndividualName(<Interfaces.IIndividualPartner>this.partner));
}

if (this.isDirty('bpa.mailingAddressForm') || this.isDirty('bpa.streetAddressForm')) {
promises.push(this.partnerEditService.updateAddresses(this.partner));
}

if (this.isDirty('bn.businessName')) {
promises.push(this.partnerEditService.updateBusinessName(<Interfaces.IBusinessPartner>this.partner));
}

if (this.isDirty('rc.individualPartnerResponsibilities') || this.isDirty('rc.businessPartnerResponsibilities')) {
promises.push(this.partnerEditService.updateResponsibilities(this.operation, this.partner));
}
}

this.partnerAddRepository.addExisting(this.operation.operationId, this.partner.customerId)
.then(() => {
this.executeSaves(promises);
});


executeSaves = (promises) => {
this.$q.all(promises)
.finally(() => {
this.$mdDialog.hide(this.partner);
});
}


And here's the partnerAddRepo.addExisting function:

addExisting = (operationId: number, partnerId: number) => {
return this.$http.put(`my/path/to/operation/${operationId}/partner/${partnerId}`);
};


So, the stuff in the
executeSaves
, which contains the 4 different service calls are being called BEFORE the
partnerAddRepository.addExisting
call gets fired, why?

Answer

Your service calls are executed as soon as you call them. Promises defer the return value of the function call, not the function's execution.

If you want to call the other function only after partnerAddRepository.addExisting has returned a value, then you should create the array of promises in the then callback.

this.partnerAddRepository.addExisting(this.operation.operationId, this.partner.customerId)
    .then(() => {
        var promises = [];

        if (this.partner.customerId > 0) {
            if (this.isDirty('ipn.individualPartnerName')) {
                promises.push(this.partnerEditService.updateIndividualName(<Interfaces.IIndividualPartner>this.partner));
            }

            if (this.isDirty('bpa.mailingAddressForm') || this.isDirty('bpa.streetAddressForm')) {
                promises.push(this.partnerEditService.updateAddresses(this.partner));
            }

            if (this.isDirty('bn.businessName')) {
                promises.push(this.partnerEditService.updateBusinessName(<Interfaces.IBusinessPartner>this.partner));
            }

            if (this.isDirty('rc.individualPartnerResponsibilities') || this.isDirty('rc.businessPartnerResponsibilities')) {
                promises.push(this.partnerEditService.updateResponsibilities(this.operation, this.partner));
            }
        }

        this.executeSaves(promises);
});