AngularJS function execution sequence question

Question

I am using calling function Save_Click in Angular controller on button click.

Following is the sequence of execution

Line Code 
1    Declare a variable V1 
2    console.log(V1) 
3    Perform a server post back, and assign a value to V1 depending on the values the service returns. console.log(V1)
4 console.log(V1)

What I see is that - in console #4 is printed before - #3 Also the value assigned in #3 is not printed in #4.

What could be the reason? What I am doing wrong? I get the same issue if I use $localStorage (ngStorage) library too.

Note - I am using Visual Studio/.Net solution to host the angular application in my Index.cshtml.

Its the natural behavior of asynchronous code. Some code blocks like the http service, events are asynchronous. When an asynchronous code block reaches,#3 in your case, program will invoke that statement and continue executing the next statement, code against the asynchronous code will execute once it completes the async operation. That's why #4 (non asynch) proints before #3 (async code). — Jijo Cleetus
– Jijo Cleetus, Commented Sep 14, 2020 at 19:16
How to make sure that the asynchronous code gets executed first? — RedBottleSanitizer
– RedBottleSanitizer, Commented Sep 14, 2020 at 20:05
In order to do that, you need to break the asynchronous behavior. ES6 is giving async and await feature. javascript.info/async-await — Jijo Cleetus
– Jijo Cleetus, Commented Sep 14, 2020 at 20:09
await will wait until the operation finishes. Please make sure that await will work only inside an async function — Jijo Cleetus
– Jijo Cleetus, Commented Sep 14, 2020 at 20:11
using the following - to the service function doesn't seem to make a change. CallAPI: async function (ServiceURL, objectToSerialize) { var url = window.location.protocol + "//" + window.location.hostname + ":94/api/Message/" + ServiceURL + "/"; console.log(url); var req = { method: 'PUT', url: url , data: objectToSerialize }; return await $http(req); } — RedBottleSanitizer
– RedBottleSanitizer, Commented Sep 14, 2020 at 21:19

Jijo Cleetus · Accepted Answer · 2020-09-14 20:15:10Z

1

Use below method

1    Declare a variable V1 
2    console.log(V1) 
3    async (Perform a server post back, and assign a value to V1 depending on the values the service returns. await console.log(V1))
4    console.log(V1)

Now #3 will prints before #4

answered Sep 14, 2020 at 20:15

Jijo Cleetus

2,8671 gold badge13 silver badges19 bronze badges

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

Comments

RedBottleSanitizer · Accepted Answer · 2021-10-12 22:00:39Z

Finally did the trick for me.



var x = {};
            
                    x.1 = '1';
                    x.2 = '2';
                   
                    MyService.CallAPI('RunRabbit', x).success(function (data) {
                        if (data === null) {
                            $scope.error = true;
                            $scope.errorDescription = "No data found for selected criteria.";
                            
                        } else {
                           
                            $scope.answer = data.answer;
                           
                        }
                    }).error(function () {

                    }).finally(function () {
                        console.log($scope.answer);
                    });

I could evaluate $scope.answer and then use it in synchronous way from finally.

Collectives™ on Stack Overflow

AngularJS function execution sequence question

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related