Я использую angularjs. Я отправляю запрос на получение каждый раз, когда изменяется ввод. И когда я получил результат, пользовательский интерфейс соответственно изменился. Однако моя проблема заключается в том, что пользователь может вводить ввод быстро, и по некоторым причинам (возможно, задержка в Интернете) последний вызов HTTP завершается раньше других, и пользовательский интерфейс отображает изменения последнего вызова FINISHED, а не последнего вызываемого запроса. Мой вопрос: есть ли способ убедиться, что последний вызванный API применяется?
Пример кода:
HTML:
<input type = " ng-change = "$ctrl.reloadData()"
/>
js:
function reloadData(){
$http.get("/myurl").then(function(data){
//update ui with data
})
}
Я бы рекомендовал не отправлять запрос GET каждый раз при изменении ввода, это приведет к отправке большого количества неиспользуемых запросов.
Вы можете использовать функцию тайм-аута, чтобы ограничить количество отправляемых запросов GET. В Angular http есть метод под названием unsubscribe
, который вы можете использовать для отказа от подписки следующим образом:
var timeout = null;
var request = null;
function reloadData() {
if (timeout) clearTimeout(timeout);
if (request) request.unsubscribe();
timeout = setTimeout(_ => {
request = $http.get("/myurl").then(function(data){
//update ui with data
});
}, 200);
}
Один из подходов состоит в том, чтобы отключить предыдущую перезагрузку:
promise = $q.when();
function reloadData(){
promise = promise.then(function() {
return $http.get("/myurl").then(function(data){
//update ui with data
});
};
Также можно использовать ng-model-options
для ограничения количества звонков:
<input ng-model = "input1"
ng-change = "$ctrl.reloadData()"
ng-model-options = "{ debounce: 1000 }" />
Для получения дополнительной информации см.
ng-model-options
Справочник API директив
AngularJS $ HTTP-сервис возвращает обещания и не имеет метода
.unsubscribe
.