如何使用AngularJS进行$ http同步调用

Question

对不起,我的新手问题,但AngularJS文档不是非常明确或广泛,以找出一些基本的东西.

有没有办法与AngularJS进行同步调用？

在服务上:

myService.getByID = function (id) {
    var retval = null;

    $http({
        url: "/CO/api/products/" + id,
        method: "GET"
    }).success(function (data, status, headers, config) {

        retval = data.Data;

    });

    return retval;
}

Answer 1

不是现在.如果查看源代码(从2012年10月的时间点开始),您将看到对XHR open的调用实际上是硬编码为异步(第三个参数为true):

 xhr.open(method, url, true);

您需要编写自己的同步调用服务.一般情况下,由于JavaScript执行的性质,您通常不会想要这样做,因此最终会阻止其他所有内容.

...但是......如果实际上需要阻止其他所有内容,也许你应该查看promises和$ q服务.它允许您等待一组异步操作完成,然后在它们全部完成后执行.我不知道你的用例是什么,但这可能值得一看.

除此之外,如果您打算自己动手,可以在此处找到有关如何进行同步和异步ajax调用的更多信息.

我希望这是有帮助的.

Answer 2

我曾与一家工厂集成谷歌地图自动完成和承诺,我希望你服务.

http://jsfiddle.net/the_pianist2/vL9nkfe3/1/

您只需要在出厂前用$ http incuida替换此请求的autocompleteService.

app.factory('Autocomplete', function($q, $http) {

和$ http请求

 var deferred = $q.defer();
 $http.get('urlExample').
success(function(data, status, headers, config) {
     deferred.resolve(data);
}).
error(function(data, status, headers, config) {
     deferred.reject(status);
});
 return deferred.promise;

<div ng-app="myApp">
  <div ng-controller="myController">
  <input type="text" ng-model="search"></input>
  <div class="bs-example">
     <table class="table" >
        <thead>
           <tr>
              <th>#</th>
              <th>Description</th>
           </tr>
        </thead>
        <tbody>
           <tr ng-repeat="direction in directions">
              <td>{{$index}}</td>
              <td>{{direction.description}}</td>
           </tr>
        </tbody>
     </table>
  </div>

'use strict';
 var app = angular.module('myApp', []);

  app.factory('Autocomplete', function($q) {
    var get = function(search) {
    var deferred = $q.defer();
    var autocompleteService = new google.maps.places.AutocompleteService();
    autocompleteService.getPlacePredictions({
        input: search,
        types: ['geocode'],
        componentRestrictions: {
            country: 'ES'
        }
    }, function(predictions, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            deferred.resolve(predictions);
        } else {
            deferred.reject(status);
        }
    });
    return deferred.promise;
};

return {
    get: get
};
});

app.controller('myController', function($scope, Autocomplete) {
$scope.$watch('search', function(newValue, oldValue) {
    var promesa = Autocomplete.get(newValue);
    promesa.then(function(value) {
        $scope.directions = value;
    }, function(reason) {
        $scope.error = reason;
    });
 });

});

问题本身就是:

deferred.resolve(varResult); 

当你做得很好并且请求时:

deferred.reject(error); 

当出现错误时,然后:

return deferred.promise;

Answer 3

var EmployeeController = ["$scope", "EmployeeService",
        function ($scope, EmployeeService) {
            $scope.Employee = {};
            $scope.Save = function (Employee) {                
                if ($scope.EmployeeForm.$valid) {
                    EmployeeService
                        .Save(Employee)
                        .then(function (response) {
                            if (response.HasError) {
                                $scope.HasError = response.HasError;
                                $scope.ErrorMessage = response.ResponseMessage;
                            } else {

                            }
                        })
                        .catch(function (response) {

                        });
                }
            }
        }]


var EmployeeService = ["$http", "$q",
            function ($http, $q) {
                var self = this;

                self.Save = function (employee) {
                    var deferred = $q.defer();                
                    $http
                        .post("/api/EmployeeApi/Create", angular.toJson(employee))
                        .success(function (response, status, headers, config) {
                            deferred.resolve(response, status, headers, config);
                        })
                        .error(function (response, status, headers, config) {
                            deferred.reject(response, status, headers, config);
                        });

                    return deferred.promise;
                };