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;
}
現在はありません。ソースコード（2012年10月のこの時点から）を見ると、XHR openの呼び出しが実際には非同期になるようにハードコーディングされていることがわかります（3番目のパラメーターはtrueです）。
xhr.open(method, url, true);
同期呼び出しを行う独自のサービスを作成する必要があります。通常、JavaScriptの実行の性質上、他のすべてをブロックすることになるため、これは通常は実行したくないことです。
...しかし..他のすべてをブロックすることが実際に必要な場合は、promiseと$qサービスを調べる必要があります。これにより、一連の非同期アクションが完了するまで待機し、すべてが完了したら何かを実行できます。あなたのユースケースが何であるかはわかりませんが、それは一見の価値があるかもしれません。
それ以外に、自分でロールする場合は、同期および非同期のajax呼び出しを行う方法の詳細についてはこちらをご覧ください。
お役に立てば幸いです。
私は Google マップのオートコンプリートと統合された工場と協力しており、約束を果たしました。
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;
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;
};
最近、ページのリロードによってトリガーされた $http 呼び出しを行いたいという状況に遭遇しました。私が行った解決策：