#ajax #angularjs #deferred
#ajax #angularjs #отложено
Вопрос:
я хотел бы выполнять удобные для пользователя действия в своем приложении. Проблема в том: У меня есть одна кнопка. Когда пользователь нажимает на него мышью, я отправляю ajax-запрос на сервер, чтобы получить некоторую информацию. Я хочу показывать эту информацию только после наведения курсора мыши на эту кнопку. Другими словами, когда он отпускает кнопку мыши. Проблема в том, что пользователь может отпустить кнопку мыши до или после ответа сервера на мой вызов ajax, поскольку я все еще хочу показывать информацию только после нажатия кнопки.
Я думаю, что могу сделать это с помощью отложенных материалов, поскольку у меня нет большого опыта в этом. Можете ли вы дать мне некоторую информацию, как это сделать?
Пример кода:
.html
<input type='button' ng-start='start()' ng-end='end()' >
.js
$scope.start = function(){
$http.get(url, data).success(function(result){})
}
$scope.end = function(){
//show result from first function
}
Ответ №1:
Пытался сделать это с использованием $ q, но, похоже, $ q не нужен.
.html
<input type='button' ng-mousedown='start()' ng-mouseup='end()' >
<div ng-show="loaded amp;amp; resolved" ng-bind="processedResult"></div>
.js
$scope.start = function(){
$scope.resolved = false;
$scope.loaded = false;
$http.get(url, data).success(function(result){
$scope.loaded = true;
$scope.processedResult = processResult(result);
});
};
$scope.end = function(){
$scope.resolved = true;
};
Комментарии:
1. не могли бы вы, пожалуйста, показать, как вы будете отображать информацию в функции end()? например, console.log(???)
2. Какая информация? Результат
$http.get? Возможно, он еще не готов — когда пользователь отпустил кнопку до того, как мы получили ответ от сервера. Но в любом случае вы можете использовать watcher, он все равно сработает:$scope.end = function(){ $scope.$watch('data', function(data){ if(!!data){console.log($scope.data);} }); $scope.resolved = true; };3. да, результат $ http.get. кажется, наблюдатель недостаточно хорош … я все еще думаю о promise и . затем метод в end()
4. Зачем вам нужны данные внутри функции end()? У вас это уже есть при обратном вызове. В случае с . затем внутри end() — он не будет доступен, если пользователь будет удерживать кнопку мыши при получении результата $http.
5. мне нужен результат только после того, как пользователь отпустит кнопку. но пользователь может отпустить кнопку до завершения запроса ajax. В этом случае я должен подождать, пока не будет выполнен $http.get … $ watch должен работать, я думаю, ты попробуешь. Но мой внутренний голос говорит, что это должно быть лучшим решением…
Ответ №2:
Я думаю, я решил свою проблему с помощью функции pretty promise.
.html
<input type='button' ng-start='start()' ng-end='end()' >
.js
$scope.start = function() {
promise = $q.when($scope.ApiCall())
.then(function(result){
return result.data;
}, function(error){
console.log(error);
})
;
};
$scope.end = function() {
promise.then(function(result){
processResult(result.datat);
});
};
$scope.ApiCall = function(){
var data = {};
return $http.get(url, {params: data});
}
Комментарии:
1. Сам метод $ http возвращает обещание. Я обновлю свой ответ.
2. Ну, неважно. Вы пробовали этот пример? Работает ли это в обоих случаях? Я все еще не понимаю, почему вы не подготавливаете полученные данные в функции simple .success и не показываете их только тогда, когда пользователь отпускает кнопку. Насколько я понимаю ваш вопрос, нет никакой разницы, где обрабатывать результат $ http. Вам нужно только не показывать обработанный результат, пока пользователь не отпустит кнопку, не так ли? Я думаю, что дополнительный $ q усложняет логику в этом случае. На самом деле у вас здесь два обещания.
3. Посмотрите, в вашей версии метод processResult() будет вызываться сразу после выполнения $http.get, независимо от того, удерживает пользователь или отпускает кнопку. я прав?
4. итак, если, скажем, в processResult() я хочу console.log(результат) , он появится сразу после выполнения $http.get , даже если у вас есть $scope.resolved , я не понимаю, как я могу предотвратить выполнение console.log …
5. Подождите. В вашем вопросе вы не хотели показывать ответ пользователю. ng-show не покажет его пользователю, пока не произойдут оба события. Вы по какой-то непонятной мне причине хотите выполнить код после обоих событий?