AngularJS abort previous requests on new request

Question

I wrote the following code to fill an autocomplete, when users enter new characters the previous requests for previous phrases must be aborted, but it doesn't work. here is my controller code:

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

and this is my service:

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

I've read this AngularJS abort all pending $http requests on route change and @ivarni solution, but I haven't solved the problem yet. could you please tell me what's wrong with my code.

score 0 · Accepted Answer · answered Jul 26 '20 at 13:59

Eventually, I found the answer. the issue was on this code:

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

I changed it to this:

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

};

Actually I changed $http.get to $http, I don't know exactly what is the difference between these two but it solved my problem

AngularJS abort previous requests on new request

1 Answers1