CODEWITHSUNDEEP
javascriptangularjstypescriptangular-promise
ganders
ganders

Reputation: 7441

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?

Upvotes: 1

Views: 62

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

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

Upvotes: 2

Related Questions