javascript - AngularJS - 使用 $http 和 debounce 处理动态搜索

Question

我在下面有一个文本输入，绑定(bind)到模型 req.mod1，在更新模型时有去抖延迟，调用 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 来跟踪请求。

关于如何处理真正的动态搜索调用有什么想法吗？如果有新请求进来，是否有办法取消请求？或者也许只是告诉 Angular 不断覆盖它？

提前致谢。

Answer 1

我想这就是你所需要的 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
    };
});