如何$ http与AngularJS同步呼叫

抱歉我的新手问题，但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的调用实际上被硬编码为asynchronous（第三个参数为true）：

  xhr.open(method, url, true); 

你需要编写自己的服务来完成同步调用。 通常这不是你通常想要做的事情，因为JavaScript执行的本质，你最终会阻止其他的事情。

…但是，如果阻止其他所有事情实际上是想要的，也许你应该看看承诺和$ q服务 。 它允许您等待一组asynchronous操作完成，然后在所有操作完成后执行。 我不知道你的用例是什么，但这可能值得一看。

除此之外，如果您要推出自己的更多关于如何进行同步和asynchronousajax调用的信息可以在这里find 。

我希望这是有帮助的。

Answer 2

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

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

你只需要用$ http incuida在出厂之前用这个请求来replaceautocompleteService。

 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

我最近遇到了一个情况，我想通过页面重新加载触发$ http调用。 我解决的解决scheme是：

1. 将这两个调用封装到函数中
2. 将第二个$ http调用作为callback传递给第二个函数
3. 调用apon .success中的第二个函数

Answer 4

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

Answer 5

以下是您可以asynchronous执行的一种方式，并像通常一样pipe理事情。 一切仍然是共享的。 你得到一个你想更新的对象的引用。 无论何时您在服务中更新该服务，都将在全球范围内更新，而无需观看或退回承诺。 这非常好，因为您可以从服务中更新底层对象，而无需重新绑定。 使用Angular的意思是要使用的方式。 我认为这可能是一个坏主意，使$ http.get /后同步。 你会在剧本中得到明显的延迟。

 app.factory('AssessmentSettingsService', ['$http', function($http) { //assessment is what I want to keep updating var settings = { assessment: null }; return { getSettings: function () { //return settings so I can keep updating assessment and the //reference to settings will stay in tact return settings; }, updateAssessment: function () { $http.get('/assessment/api/get/' + scan.assessmentId).success(function(response) { //I don't have to return a thing. I just set the object. settings.assessment = response; }); } }; }]); ... controller: ['$scope', '$http', 'AssessmentSettingsService', function ($scope, as) { $scope.settings = as.getSettings(); //Look. I can even update after I've already grabbed the object as.updateAssessment(); 

在某个angular度看，

 <h1>{{settings.assessment.title}}</h1> 

Answer 6

把你的电话包装在一个Promise.all()方法中，例如

Promise.all([$http.get(url).then(function(result){....}, function(error){....}])

根据MDN

所有履行（或第一次拒绝）