Возможно ли в ангуляре получать возвращаемое значение асинхронной функции?

Question

[Bur-Burito]

Пытаюсь разбираться с JS и первым ангуляром в частности. Написал такой код:

<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>

При нажатии на кнопку вызывается функция на Handler() на скоупе, которая с помощью алерта выводит возвращаемое значение функции GetResponse(). В GetResponse() оглашается переменная "temp" , со значением "foo", после чего делается ajax-запрос, и мы получаем сообщение от сервера, после чего выводим это значение алертом и присваиваем его переменной temp, и в конце возвращаем эту переменную.

По идее, при нажатии на кнопку пользователь должен дважды получить модальное окно со значением, полученным на сервере: первый раз вызванное внутри GetRespone() и второе, вызванное в Handler(). Но на деле сначала выводится "foo", а потом строка, которую передал сервер. То есть GetResponse() успевает возвращать temp еще до того как получит ответ от сервера. Есть ли механизмы, с помощью которых можно приостановить выполнение функции до того как она получит ответ от сервера?

Comments

[Олег Драпеза]

https://learn.javascript.ru/promise

Answer 1

[emp1re]

seccess ? Ну если без шуток то нужно вернуть сам promise , return $http.get('/Home/GetValue'), а у вас будет всегда возвращаться "foo". Дальше немного сами подумайте, очень помогает выводить в консоль промежуточные результаты для понимания что вообще за магия творится.

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

Comments

[Bur-Burito]

С "seccess" - очепятка. Большое спасибо за ответ

Answer 2

[Aleksei Podgaev]

Согласен с предыдущим автором. Разберитесь как работают промисы и асинхронный код вообще.
Ваша функция GetResponse действительно не ждёт, пока отработает запрос, а сразу возвращает значение "foo". Так что вы получаете именно то, что написали в своём коде. Если вы будете "приостанавливать" выполнение функции, то ваши пользователи проклянут вас за повисший браузер. Лучше сделать, чтобы alert вызывался только после выполнения запроса, т.е. в success.

Answer 3

[shoxabbos Olimjonov]

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