AngularJS - обработка динамического поиска с использованием $ http и debounce

Question

AngularJS - обработка динамического поиска с использованием $ http и debounce

0

У меня есть текстовый ввод ниже, связанный с моделью req.mod1, с задержкой debounce в модели обновления, которая вызывает функцию pullData().

<input type="text" class="form-control" ng-change="pullData()" ng-model-options="{debounce: 1000}" ng-model="req.mod1">

Внутри pullData() У меня есть простой запрос $http.get, который извлекает данные и обновляет некоторые другие поля в форме.

$scope.pullData = function(){
    var pullingData = true;
    if (!pullingData){
        $http.get('example.com/search/' + $scope.req.mod1 ).then(res)
            ...
            $scope.req.mod2 = res.data.mod2;
            $scope.req.mod3 = res.data.mod3;
            var pullingData = false;
            ...
    }
}

Возникающая проблема заключается в том, что несколько вызовов стекаются друг на друга - я думаю, - и поэтому, если пользователь случайно вводит текст, подождите> 1 секунду и введите еще немного, вызов будет выходить с первым введенным текстом. Затем он вытащил данные и обновил форму с первым res. Я пытаюсь отслеживать запрос с помощью pullingData var.

Любые идеи о том, как обращаться с действительно динамичным поисковым вызовом? Есть ли способ отменить запросы, если приходит новый? Или, может быть, просто сказать, угловато, чтобы постоянно перезаписывать его?

Заранее спасибо.

zekone 09 июнь 2016, в 16:40

Источник

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

jcvegan · Answer 1 · 2016-06-09T13-18-00.000Z

Я думаю, что это то, что вам нужно http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx

Когда вы создаете запрос, он называется Promise, поэтому вам нужно отменить это.

Что-то вроде этого:

app.factory("movies", function($http, $q){
    var getById = function(id){
        var canceller = $q.defer();
        var cancel = function(reason){
            canceller.resolve(reason);
        };
        var promise = $http.get("/api/movies/slow/" + id, { timeout: canceller.promise})
                .then(function(response){
                   return response.data;
                });
        return {
            promise: promise,
            cancel: cancel
        };
    };
    return {
        getById: getById
    };
});

Qianyue · Answer 2 · 2016-06-09T12-46-00.000Z

Когда пользователь вводит что-то для поиска, ваше приложение всегда должно искать пользовательский ввод. Это означает, что вы не должны отменить ввод пользователя.

Например, пользователь хочет найти что-то о "звездном", когда он вводит "звезду", и вы получаете какой-то результат. Если теперь вы отменяете "войну", которая вводится после, результат не является хорошим. Поэтому просто позвольте Angular переопределить результат.

Более того, некоторые ошибки в вашем примере кода, когда вы вызываете pullData, никогда не проходят проверку if:

$scope.pullData = function(){
    var pullingData = true;
    // !pullingData is always false
    if (!pullingData){
        $http.get('example.com/search/' + $scope.req.mod1 ).then(res)

    }
}