Is it possible in Angular to get the return value of an asynchronous function?

Question

JavaScript

I'm trying to deal with JS and the first angular in particular. Wrote this code:

<button class="but" ng-click="Handler()">Button</button> <br />
    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller("myCtrl", function ($scope, $http) {

            $scope.GetRespose = function () {
                var temp = "foo"
                $http.get('/Home/GetValue').seccess(function (data) {                    
                    alert(data);
                    temp = data;
                })               
                return temp;
            }
            $scope.Handler = function () {
                alert($scope.GetRespose())
            }
        })

    </script>

When the button is pressed, the function on the Handler() on the scope is called, which displays the return value of the GetResponse() function using an alert. In GetResponse(), the variable "temp" is announced, with the value "foo", after which an ajax request is made, and we receive a message from the server, after which we display this value with an alert and assign it to the temp variable, and at the end we return this variable.

In theory, when clicking on the button, the user should get a modal window twice with the value received on the server: the first time called inside GetRespone() and the second time called in Handler(). But in fact, "foo" is displayed first, and then the string that the server passed. That is, GetResponse() has time to return temp before it receives a response from the server. Are there any mechanisms by which it is possible to suspend the execution of a function before it receives a response from the server?

Answer 1

seccess? Well, joking aside, you need to return the promise itself, return $http.get('/Home/GetValue'), and you will always return "foo". Then think for yourself a little, it helps a lot to display intermediate results in the console to understand what kind of magic is going on.

$scope.GetRespnose = function () {
  return  $http.get('/Home/GetValue')
}
$scope.Handler = function () {
 alert($scope.GetRespose()) // посмотрите что будет в результате, надеюсь поможет
  }

Answer 2

I agree with the previous author. Understand how promises and asynchronous code work in general.
Your GetResponse function doesn't really wait until the request is processed, but immediately returns the value "foo". So you get exactly what you wrote in your code. If you "pause" the execution of the function, then your users will curse you for a hung browser. It is better to make the alert be called only after the request is completed, i.e. in success.

Answer 3

let promise = new Promise((resolve, reject) => {
      if(success){
           resolve(success);
      }else{
           reject(new Error("Network connection error!"))
      }
});


promise.then((data) => {
   console.log("success");
}).catch((error) => {
   console.log("error");
})