What could be causing my $q resolution and promise to not function as expected?

Question

What could be causing my $q resolution and promise to not function as expected?

I'm constantly facing issues with $q

Here is an instance where the .then is triggered immediately

    function performAction() {
            var deferred = $q.defer();

            var modalInstance = $modal.open({
                template: '<p>this is a modal</p><a ng-click="ok()">ok</a>',
                controller: function ($scope, $modalInstance) {
                    $scope.ok = function () {
                        $modalInstance.close();
                    };
                }
            });

            modalInstance.result.then(function () {
                console.log('ok');
                deferred.resolve();
            }, function () {
                console.log('Modal dismissed');
            });

            return deferred.promise;
        }

In another part of the code:

    $scope.service.performAction().then(
                $scope.variable = 5
            );

http://jsfiddle.net/IngoVals/stqwanhm/

When I tried to replicate a similar scenario in Fiddle, I encountered this issue where .then did not execute. Can anyone explain what might be happening here?

javascript angularjs angular-promise

Answer 1

Answer №1

When you update the scope property outside of the then callback, it doesn't fire right away. Take a look at this code snippet:

$scope.service.doit().then(
    $scope.variable = 5
);

This code is incorrect. It should be written like this instead:

$scope.service.doit().then(function() {
    $scope.variable = 5
});

Another issue to watch out for is the so-called deferred anti-pattern. Make sure to avoid creating redundant deferred objects like in the example below:

function doit() {
    return $modal.open({
        template: '<p>this is modal</p><a ng-click="ok()">ok</a>',
        controller: function ($scope, $modalInstance) {
            $scope.ok = function () {
                $modalInstance.close();
            };
        }
    }).result.then(function () {
        console.log('ok');
    }, function () {
        console.log('Modal dismissed');
    });
}

Check out the demo here: http://jsfiddle.net/stqwanhm/2/

Answer 2

When you update the scope property outside of the then callback, it doesn't fire right away. Take a look at this code snippet:

$scope.service.doit().then(
    $scope.variable = 5
);

This code is incorrect. It should be written like this instead:

$scope.service.doit().then(function() {
    $scope.variable = 5
});

Another issue to watch out for is the so-called deferred anti-pattern. Make sure to avoid creating redundant deferred objects like in the example below:

function doit() {
    return $modal.open({
        template: '<p>this is modal</p><a ng-click="ok()">ok</a>',
        controller: function ($scope, $modalInstance) {
            $scope.ok = function () {
                $modalInstance.close();
            };
        }
    }).result.then(function () {
        console.log('ok');
    }, function () {
        console.log('Modal dismissed');
    });
}

Check out the demo here: http://jsfiddle.net/stqwanhm/2/

Answer 3

Answer №2

The value being passed into then here is 5:

$scope.service.doit().then(
    $scope.variable = 5
);

This code functions as follows:

$scope.variable is set to the value of 5
The result of this assignment (which is 5) is then passed into then

Both of these actions take place immediately when then is called, without waiting for the promise to be resolved.

The intention was to pass a function into then, which would then set the variable:

$scope.service.doit().then(function() {
    $scope.variable = 5
});

By passing in a function, the code within that function will only run when it is called later upon resolution of the promise.

Updated Fiddle Link

In ES6, things become more concise with the introduction of "fat arrow" functions:

$scope.service.doit().then(() => $scope.variable = 5);

This syntax also creates a function and passes it into then (in an ES6-supported environment).

While this conciseness is helpful, it can also be easy to overlook when reading the code. :-)

Answer 4

The value being passed into then here is 5:

$scope.service.doit().then(
    $scope.variable = 5
);

This code functions as follows:

$scope.variable is set to the value of 5
The result of this assignment (which is 5) is then passed into then

Both of these actions take place immediately when then is called, without waiting for the promise to be resolved.

The intention was to pass a function into then, which would then set the variable:

$scope.service.doit().then(function() {
    $scope.variable = 5
});

By passing in a function, the code within that function will only run when it is called later upon resolution of the promise.

Updated Fiddle Link

In ES6, things become more concise with the introduction of "fat arrow" functions:

$scope.service.doit().then(() => $scope.variable = 5);

This syntax also creates a function and passes it into then (in an ES6-supported environment).

While this conciseness is helpful, it can also be easy to overlook when reading the code. :-)

What could be causing my $q resolution and promise to not function as expected?

Answer №1

Answer №2

Similar questions

Determining the dimensions of a div once it has completed loading

Is utilizing reactivity on static objects practical in Vue 3?

When the jQuery button is clicked, the execute function will run multiple times

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

Having trouble invoking the .js file with form POST

The chosen index in the Material Stepper feature is experiencing a malfunction

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

Replace all occurrences of a specific string throughout a extensive document in Node.js

Create a jQuery AJAX call by setting up an HTTP request with specific headers and a request body

guide on adding a variable to the link_to path

Ways to transfer data from JavaScript to Wicket framework

Retrieving the object ID of an Open Graph from a page's URL

The ultimate guide to effectively hydrating a React application using code splitting on the client side

Steps to retain localStorage data while redirecting to another external webpage

When faced with the scenario of having the hashtag in the href attribute and a browser's back button, it

Is it possible to trim a video using HTML code?

Creating a function that assigns an anonymous function which in turn returns another anonymous function

Placing buttons on top of a video within a div container