Angular를 사용한 $http 동기 호출 방법JS
AngularJS와 동기 콜을 발신하는 방법이 있습니까?
앵귤러JS 문서는 몇 가지 기본적인 사항을 파악하기 위한 명시적이거나 광범위하지 않습니다.
서비스 중:
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에 대한 콜이 실제로는 비동기식으로 하드 코드화되어 있는 것을 알 수 있습니다(세 번째 파라미터는 True).
xhr.open(method, url, true);
동기 호출을 하는 서비스를 직접 작성해야 합니다.일반적으로 JavaScript 실행의 특성 때문에 다른 모든 것을 차단하게 됩니다.
...하지만..다른 모든 것을 차단하고 싶다면 약속과 $q 서비스를 알아봐야 할 것 같습니다.일련의 비동기 작업이 완료될 때까지 기다린 후 작업이 모두 완료되면 어떤 작업을 실행할 수 있습니다.어떤 용도인지 모르겠지만 한 번쯤은 확인해 볼 가치가 있을 것 같습니다.
그 밖에도, 독자적인 롤링을 실시하는 경우는, 동기 및 비동기 Ajax 콜의 작성 방법에 관한 자세한 정보를 여기를 참조해 주세요.
그게 도움이 됐으면 좋겠어요.
저는 구글맵과 통합된 공장에서 일한 적이 있으며, 약속도 있으니 잘 부탁드립니다.
http://jsfiddle.net/the_pianist2/vL9nkfe3/1/
이 요청으로 autocomplete Service를 $http incuida로 대체하기만 하면 됩니다.
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 콜을 해야 하는 상황에 처했습니다.제가 선택한 솔루션은 다음과 같습니다.
- 2개의 콜을 함수로 캡슐화한다.
- 두 번째 $http 콜을 두 번째 함수에 콜백으로 전달합니다.
- apon의 두 번째 함수를 호출합니다.success
다음은 비동기식으로 작업을 수행하고 평소처럼 작업을 관리할 수 있는 방법입니다.모든 것이 아직 공유되고 있다.업데이트할 개체에 대한 참조가 표시됩니다.서비스 내에서 업데이트를 할 때마다 약속을 보거나 반환할 필요 없이 글로벌하게 업데이트됩니다.이는 서비스 내에서 기본 개체를 다시 바인딩하지 않고도 업데이트할 수 있기 때문에 매우 유용합니다.Angular를 원래대로 사용하는 것.$http.get/post를 동기화하는 것은 좋지 않다고 생각합니다.대본이 상당히 지연됩니다.
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();
그리고 시야 어딘가에서:
<h1>{{settings.assessment.title}}</h1>
동기 XHR은 권장되지 않으므로 이 기능에 의존하지 않는 것이 좋습니다.동기 POST 요구를 실행할 필요가 있는 경우는, 서비스내에서 다음의 도우미를 사용해 폼 포스트를 시뮬레이트 할 수 있습니다.
지정된 URL에 게시된 숨겨진 입력이 있는 양식을 만드는 방식으로 작동합니다.
//Helper to create a hidden input
function createInput(name, value) {
return angular
.element('<input/>')
.attr('type', 'hidden')
.attr('name', name)
.val(value);
}
//Post data
function post(url, data, params) {
//Ensure data and params are an object
data = data || {};
params = params || {};
//Serialize params
const serialized = $httpParamSerializer(params);
const query = serialized ? `?${serialized}` : '';
//Create form
const $form = angular
.element('<form/>')
.attr('action', `${url}${query}`)
.attr('enctype', 'application/x-www-form-urlencoded')
.attr('method', 'post');
//Create hidden input data
for (const key in data) {
if (data.hasOwnProperty(key)) {
const value = data[key];
if (Array.isArray(value)) {
for (const val of value) {
const $input = createInput(`${key}[]`, val);
$form.append($input);
}
}
else {
const $input = createInput(key, value);
$form.append($input);
}
}
}
//Append form to body and submit
angular.element(document).find('body').append($form);
$form[0].submit();
$form.remove();
}
필요에 따라 수정합니다.
을 을을 a 하는 것은 ?Promise.all()법, ,,
Promise.all([$http.get(url).then(function(result){....}, function(error){....}])
MDN에 준거
약속.모두 모든 충족(또는 첫 번째 거부)을 기다립니다.
언급URL : https://stackoverflow.com/questions/13088153/how-to-http-synchronous-call-with-angularjs
'programing' 카테고리의 다른 글
| Swift 3에서 JSON 파일 읽기 (0) | 2023.03.31 |
|---|---|
| Enum이 있는 Spring의 @RequestParam (0) | 2023.03.31 |
| 정의되지 않은 속성 '이력'을 읽을 수 없습니다(React Router 5의 useHistory hook). (0) | 2023.03.31 |
| 부울 속성에 의한 "track by"를 사용한 각도 1.2ng 반복 필터링 (0) | 2023.03.31 |
| AngularJS용 ui-router를 사용하여 쿼리 파라미터를 추출하는 방법 (0) | 2023.03.31 |