How to stop ongoing http request in AngularJs

Question

My ApiService:

app
        .factory('apiService', apiService);

    apiService.$inject = ['$http'];

    function apiService($http) {

        return {
            get: _get,
            post: _post
        };

        function _get(url, config) {
            return $http.get(url, config);
        }

        function _post(url, data, config) {
            return $http.post(url, data, config);
        }
    }

My BookService:

app
        .factory('bookService', bookService);

    bookService.$inject=['SERVER_CONSTANT','BOOK_CONSTANT','apiService'];

    function bookService(SERVER_CONSTANT,BOOK_CONSTANT,apiService) {

        return {
            getLowestOnlinePrice:_getLowestOnlinePrice
        }
        function _getLowestOnlinePrice(isbn){
            return apiService.get("......");
        }
    }

My Controller:

function doSearch(data){
        angular.forEach($scope.bookSearchResult,function(book){
              book.lowestOnlinePricePromise = 
                  bookService.getLowestOnlinePrice(book.bookIsbn).then(function(response){
                                ...
                   }).catch(function(response){
                                ...
                   });
                        });
}

function onClick(){
        angular.forEach($scope.bookSearchResult,function(resultBook){
                console.log(resultBook.lowestOnlinePricePromise); 
                //prints as Promise Object
            });
        angular.forEach($scope.bookSearchResult,function(resultBook){
                resultBook.lowestOnlinePricePromise.resolve(); 
               // Shows Error resolve is not a function 
            });
}

I have to stop ongoing http requests. When I print the promises they print as Promise object. Now how to stop them? I didn't use $q.defer() on apiService. I am not sure what is the best way. Tried resolve() but it shows resultBook.lowestOnlinePricePromise.resolve is not a function. Help needed.

I am using version 1.4.5

Thanks in Advice.

Sujit · Accepted Answer · 2016-04-19 10:22:02Z

Make GET & POST functions like this in apiService

        function _get(url, config) {
            var defer = $q.defer();

            var promise = $http.get(url, { timeout: defer.promise});

            promise.abort = function(reason){
                defer.resolve(reason);
            };

            return  promise;
        }

Then On the Controller:

function doSearch(data){
        angular.forEach($scope.bookSearchResult,function(book){
              (book.lowestOnlinePricePromise = 
                  bookService.getLowestOnlinePrice(book.bookIsbn)).then(function(response){
                                ...
                   }).catch(function(response){
                                ...
                   });
       });
}

function onClick(){

        angular.forEach($scope.bookSearchResult,function(resultBook){
                resultBook.lowestOnlinePricePromise.abort(); 

            });
}

In that solution, an abort() function is added with the promise. Then the only promise was saved on controller.

Look again

(book.lowestOnlinePricePromise = bookService.getLowestOnlinePrice(book.bookIsbn)).then()

And Whenever needed just call the abort() function.

Help was found: http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm

Collectives™ on Stack Overflow

How to stop ongoing http request in AngularJs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related