Как сделать синхронный HTTP-запрос в angular js

Как сделать блокировку HTTP-запроса в AngularJS, чтобы я мог использовать ответ $http на самой следующей строке?

В следующем примере объект $http не возвращает результат в следующую строку, чтобы передать этот результат в библиотеку JavaScript fullcalender(), поскольку $scope.data возвращает пустое значение.

Это пример кода:

$http.get('URL').success(function(data){
    $scope.data = data;
});

$.fullCalender({
    data: $scope.data
});

Ответ 1

Вы можете использовать promises для этого.

вот пример:

$scope.myXhr = function(){

    var deferred = $q.defer();

    $http({
        url: 'ajax.php',
        method: 'POST',
        data:postData,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        //if request is successful
        .success(function(data,status,headers,config){

            //resolve the promise
            deferred.resolve('request successful');

        })
        //if request is not successful
        .error(function(data,status,headers,config){
            //reject the promise
            deferred.reject('ERROR');
        });

    //return the promise
    return deferred.promise;
}

$scope.callXhrAsynchronous = function(){

    var myPromise = $scope.myXhr();

    // wait until the promise return resolve or eject
    //"then" has 2 functions (resolveFunction, rejectFunction)
    myPromise.then(function(resolve){
        alert(resolve);
        }, function(reject){
        alert(reject)      
    });

}

Ответ 2

Вы не можете, вам нужно иметь дело с ним через promises, но вы можете попробовать сделать это следующим образом:

$http.get('URL').success(function(data){
    angular.copy(data, $scope.data);
});

$.fullCalender({
    data: $scope.data
});

но большинство людей просто сделало

$http.get('URL').success(function(data){
    $.fullCalender({
        data: data
    });
});

Если ваш объект fullCalender не работает с данными async, вам может потребоваться обернуть его чем-то вроде ng-if или заставить его перерисовывать, когда данные будут отправлены. Вы также можете заставить контроллер не загружаться, пока данные не будут загружены с помощью разрешения маршрута.

Ответ 3

Вот практический ответ, любезно предоставленный пользователем Кирилл Слатин, который отправил ответ в качестве комментария. Пример практического использования в нижней части ответа.

Если, как и мне, вам нужно использовать этот объект ответа как переменную области видимости, это должно работать:

$http.get('URL').success(function(data){

$scope.data = data;
$.fullCalender = $scope.data;
$scope.$apply()
});

$scope.$apply() - это то, что будет сохранять объект ответа, чтобы вы могли использовать эти данные.

Зачем вам это нужно?

Я пытался создать страницу редактирования для моего рецепта. Мне нужно было заполнить мою форму выбранными данными рецепта. После выполнения моего запроса GET и передачи данных ответа в область $scope.form, я ничего не получил... $scope.$apply() и Кирилл Слатин помог большому времени. Привет, друг!

Вот пример моего editRecipeController:

  $http.get('api/recipe/' + currentRecipeId).then(
    function (data) {
      $scope.recipe = data.data;
      $scope.form = $scope.recipe;
      $scope.$apply()
    }
);

Надеюсь, что это поможет!