Angular firing function in then clause before original function

Question

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?

Could it be timing? You are pushing those promises into the array, but also firing whatever returns the promises. — lintmouse
– lintmouse, Commented Jun 23, 2016 at 13:09

Yaron Schwimmer · Accepted Answer · 2016-06-24 09:04:01Z

2

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);
});

edited Jun 24, 2016 at 9:04

answered Jun 23, 2016 at 13:09

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ganders Over a year ago

perfect sir, thank you. Never would have thought that I'd need to nest that entire chunk in the .then()

Yaron Schwimmer Over a year ago

I would probably put that chunk in a function, and only call that function. This way the then is less messy

Collectives™ on Stack Overflow

Angular firing function in then clause before original function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related