Search code examples
angularjsasynchronoustimeoutabort

AngularJS $resource Abort Async Function Request using a Timeout


Hi I'm looking for a way to abort a .$save() request. I currently have a timeout in milliseconds on my resource object, however it does not work as I expected. The timeout will fire the error response on curCacheObj.$save after x milliseconds, but it does not actually abort the .$save() method, it will still post to the database! So I was thinking of doing something along the lines of:

$timeout(function() {
     // abort .$save() function here
}, 30000);

However I can't seem to find a way to actually abort the request.

Currently I have the following code (simplified):

app.factory('Post', function($resource) {
  return $resource('http://my_endpoint_here/post', {}, {save: {
        method: 'POST',
        timeout: 5000
        }
   });
});

app.service('scService', function ($window, Post, $cordovaProgress, $cordovaDialogs, $timeout) {
                 if (postCount > 0) {
                    $cordovaProgress.showSimple(false);
                    curCacheObj.$save(function (response) {
                            console.log("Post " + postCount + " sent!");
                        }, function (response) {
                              $cordovaProgress.hide();
                              console.log(curCacheObj);
                              $window.location.href= 'index.html';
                              return;
                        }).then(function() {
                            window.localStorage.removeItem("post" + postCount);
                            postCount --;
                            window.localStorage.setItem("localPostCount", postCount);
                            $cordovaProgress.hide();
                            console.log("this just ran");
                            scService.sendCache();
                        });
                }
                else {              
                    $cordovaProgress.showSuccess(false, "Success!");
                    $timeout(function() {
                      $cordovaProgress.hide();
                      $window.location.href= 'index.html';
                    }, 1500);
                }
});

Solution

  • Turns out I was creating an 'artificial' error by setting the timeout to 50 ms. I didn't realize how web service endpoints respond to incoming requests. I figured this out by testing with a poor connection. With a good connection, firing the .$save() request sent successfully each time. The moment the .$save() sent, the web service would complete its operation regardless of the timeout. All it knows is that a request just came in, so it completes its task and returns a successful response. The timeout would then fire within app.js (within 50ms) and my error logic would run through.

    Fixing this 'error' simply required setting a proper timeout of 60 seconds.

    app.factory('Post', function($resource) {
      return $resource('http://my_endpoint_here/post', {}, {save: {
            method: 'POST',
            timeout: 60000 // prev 50ms during testing
            }
       });
    });