AngularJS根据新请求中止先前的请求

时间:2020-07-25 15:29:22

标签: angularjs ajax autocomplete

我编写了以下代码来填充自动完成功能,当用户输入新字符时,先前对先前短语的请求必须中止,但这是行不通的。 这是我的控制器代码:

$rootScope.autocompletePendingRequests = [];
$rootScope.autoComplete = function (param) {
        cancelAllPendingRequests();
        var canceller = $q.defer();
        $rootScope.autocompletePendingRequests.push({
            canceller: canceller,
            param: param
        });
        var promise = ngHomeService.searchAutoComplete(param, canceller.promise);
        promise.then(function (response) {
            
            if (response) {
                var result = response.data;
                
                return result;
            } else
                return null;
        });
        promise.finally(function () {
                $rootScope.autocompletePendingRequests = $.grep($rootScope.autocompletePendingRequests, (value) => {
                    return value.param != param;
                })
            }
        );

        return promise;
    };
function cancelAllPendingRequests() {
        angular.forEach($rootScope.autocompletePendingRequests, (p) => 
            p.canceller.resolve();
        });
        $rootScope.autocompletePendingRequests.length = 0;
    }

这是我的服务

this.searchAutoComplete = function (param, inputtimeout) {
        return $http.get("api/Search/AutoComplete/",
            {
                params: {
                    searchText: param.text,
                    type: param.type,
                    searchType: param.searchType,                        
                    pageNumber: param.pageNumber,
                    pageSize: param.pageSize,
                    sort: param.sort
                }
            },
            { timeout: inputtimeout });
    };

我已经读过了 AngularJS abort all pending $http requests on route change 和@ivarni解决方案,但我还没有解决问题。 您能告诉我我的代码有什么问题吗?

1 个答案:

答案 0 :(得分:0)

最终,我找到了答案。问题出在此代码上:

this.searchAutoComplete = function (param, inputtimeout) {
    return $http.get("api/Search/AutoComplete/",
        {
            params: {
                searchText: param.text,
                type: param.type,
                searchType: param.searchType,                        
                pageNumber: param.pageNumber,
                pageSize: param.pageSize,
                sort: param.sort
            }
        },
        { timeout: inputtimeout });
};

我将其更改为:

this.searchAutoComplete = function (param, inputtimeout) {
return $http({
    method: "GET",
    params: {
        searchText: param.text,
        type: param.type,
        searchType: param.searchType,                        
        pageNumber: param.pageNumber,
        pageSize: param.pageSize,
        sort: param.sort
    },
    url: "api/Search/AutoComplete/",
    timeout: inputtimeout 
});

};

实际上我将$http.get更改为$http,我不确定这两者之间到底有什么区别,但这解决了我的问题