Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bretondevbretondev 

Promise chaining does not work

I have created two Promises.
I wanted the second Promise to be called ONLY after first Promise has completed.
Right now, it seems that both Promises run almost at same time.
What am I doing wrong?
  
var fetchCurrentUserPromise = new Promise(
            $A.getCallback(function (resolve, reject) {
                let action = component.get("c.fetchCurrentUser");
                action.setCallback(this, function (response) {
                    if (response.getState() === "SUCCESS") {
                        resolve(response.getReturnValue());
                    } else {
                        reject(response.getError());
                    }
                });
                $A.enqueueAction(action);
            })
        );

        var getContractsByUserPromise = new Promise(
            $A.getCallback(function (resolve, reject) {
                let action = component.get("c.getContractsByUser");
                action.setParam("customer", component.get("v.userInfo"));
                action.setCallback(this, function (response) {
                    if (response.getState() === "SUCCESS") {
                        resolve(response.getReturnValue());
                    } else {
                        reject(response.getError());
                    }
                });
                $A.enqueueAction(action);
            })
        );

        fetchCurrentUserPromise
            .then(
                function (userInfo) {
                    component.set("v.userInfo", userInfo);
                    return getContractsByUserPromise;
                },
                function (errorMessages) {
                    component.set("v.errors", errorMessages);
                }
            )
            .then(
                function (contracts) {
                    contracts.forEach(function (c) {
                        c.isDisabled = false;
                    });
                    component.set("v.contractsForSelection", contracts);
                },
                function (errorMessages) {
                    component.set("v.errors", errorMessages);
                }
            );

 
Best Answer chosen by bretondev
bretondevbretondev
I solved the issue by myself.
After some research,  I found out I had to wrap my Promises within functions, otherwise they execute immediately.

Corrected code : 
var fetchCurrentUserPromise = function () {
            return new Promise(
                $A.getCallback(function (resolve, reject) {
                    let action = component.get("c.fetchCurrentUser");
                    action.setCallback(this, function (response) {
                        if (response.getState() === "SUCCESS") {
                            resolve(response.getReturnValue());
                        } else {
                            reject(response.getError());
                        }
                    });
                    $A.enqueueAction(action);
                })
            );
        };

        var getContractsByUserPromise = function () {
            return new Promise(
                $A.getCallback(function (resolve, reject) {
                    let action = component.get("c.getContractsByUser");
                    action.setParam("user", component.get("v.userInfo"));
                    action.setCallback(this, function (response) {
                        if (response.getState() === "SUCCESS") {
                            resolve(response.getReturnValue());
                        } else {
                            reject(response.getError());
                        }
                    });
                    $A.enqueueAction(action);
                })
            );
        };

        fetchCurrentUserPromise()
            .then(
                function (userInfo) {
                    component.set("v.userInfo", userInfo);
                    return getContractsByUserPromise();
                },
                function (errorMessages) {
                    component.set("v.errors", errorMessages);
                }
            )
            .then(
                function (contracts) {
                    contracts.forEach(function (c) {
                        c.isDisabled = false;
                    });
                    component.set("v.contractsForSelection", contracts);
                },
                function (errorMessages) {
                    component.set("v.errors", errorMessages);
                }
            );