AngularJS - 使用$http和去抖动处理动态搜索

Question

>我在下面有一个文本输入，绑定到一个模型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 跟踪请求。

关于如何处理真正的动态搜索呼叫的任何想法？如果有新请求，有没有办法取消请求？或者也许只是告诉角度不断覆盖它？

提前谢谢。

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
    };
});

Answer 2

当用户输入要搜索的内容时，你的应用应始终按用户的输入进行搜索。这意味着您不应取消用户的输入。

例如，当用户想要搜索有关"starwar"的内容时，当他/她输入"star"时，你会得到一些结果。如果现在你取消之后进入的"战争"，结果就不好了。所以只要让 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)
    }
}