отправка нескольких HTTP-запросов на изменение ввода и применение последнего изменения

Question

Я использую angularjs. Я отправляю запрос на получение каждый раз, когда изменяется вход. И когда я получил результат, пользовательский интерфейс меняется соответственно. Однако моя проблема заключается в том, что пользователь может быстро вводить данные, и по некоторым причинам (возможно, из-за интернет-задержки) последний HTTP-вызов завершается до того, как другие, и пользовательский интерфейс отображает изменения последнего ЗАКОНЧЕННОГО вызова, а не последнего вызванного запроса. У меня вопрос, есть ли способ убедиться, что последний вызванный API, который применяется, применяется?

Пример кода:

HTML:

<input type=" ng-change="$ctrl.reloadData()"
                             />

ЯШ:

function reloadData(){
     $http.get("/myurl").then(function(data){
         //update ui with data
     })
}

Answer 1

Один из подходов - отключить предыдущую перезагрузку:

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 }" />

Для получения дополнительной информации см.

• AngularJS ng-model-options Директива API Reference

Answer 2

Я бы порекомендовал не отправлять 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);
}