AngularJS: Minimal example with $resource and timeout

Question

I'm struggling with a minimal example of a $resource timing out after a couple of seconds. Probably some stupid syntactic stuff.

Ok, here's my jsfiddle: http://jsfiddle.net/904dykrp/1/

var app = angular.module('app', ['ngResource']);

app.controller('AppController', function($scope, $resource, $timeout) {
    var url = "https://httpbin.org/delay/4";    // waits 4 seconds
    var myResource = $resource(url, {
        method: "get",
        timeout: 3000,  // 1) timeout after 3s -> gets ignored
        isArray: true,
        cancellable: true
    });
    $timeout(function() {
        // https://docs.angularjs.org/api/ngResource/service/$resource (at the bottom)
        myResource.$cancelRequest();    // 2) how do I cancel?
    }, 2000);

    myResource.get(function(response) {
        $scope.response = response;
    }, function(error) {
        // Here I want to do sth. with the cancelled request
        $scope.error = "Request took too long, cancelled. " + error;
    });
});

1) use $resource(...timeout: 3000). This gets ignored.

2) use $timeout to cancel the request after 2s. But $cancelRequest is unknown.

But unfortunately both requests to cancel my request don't work.

Can you help?

Thanks, Bernhard

Update (Working example by georgeawg):

var app = angular.module('app', ['ngResource']);  
app.controller('AppController', function($scope, $resource, $timeout) {
    var url = "https://httpbin.org/delay/4";    // waits 4 seconds
    var myResource = $resource(url, {}, { 
      timedGet: {
        method: "get",
        timeout: 3000,
      },
    });
    var x = myResource.timedGet();
    x.$promise.then(function(response) {
       console.log(response)
       $scope.response = response;
    }, function(error) {
        // Here I want to do sth. with the cancelled request
           $scope.error = "Request took too long, cancelled. " + error;
    });
});

georgeawg · Accepted Answer · 2019-10-10 12:04:28Z

3

The $resource factory was malformed:

/* ERRONEOUS
var myResource = $resource(url, {
    method: "get",
    timeout: 3000,  // 1) timeout after 3s -> gets ignored
    isArray: true,
    cancellable: true
});
*/

//BETTER
var actions = {
  timedGet: {
    method: "get",
    timeout: 3000
  }
};    
var myResource = $resource(url, {}, actions);

Action methods are defined as the third argument of the factory. The second argument is for default parameters.

Usage:

var x = myResource.timedGet();
x.$promise.then(function(response) {
    $scope.response = response;
}, function(error) {
    // Here I want to do sth. with the cancelled request
    $scope.error = "Request took too long, cancelled. " + error;
});

The DEMO on JSFiddle

edited Oct 10, 2019 at 12:04

answered May 10, 2017 at 6:56

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bernie Over a year ago

Thanks, that was it. As expected, I was close, but as it often happens for me and AngularJS, couldn't reach the finishing line ;-)

Jon · Accepted Answer · 2017-05-09 21:39:42Z

1

I was running across a similar situation and we eventually realized that this had to be accomplished on the server. For our situation modifying the timeout on the server fixed the issue.

answered May 9, 2017 at 21:39

Jon

2,71123 silver badges28 bronze badges

1 Comment

Bernie Over a year ago

Yep, that makes sense. I didn't think about that, but yes, good idea.

georgeawg · Accepted Answer · 2017-05-10 06:11:42Z

0

Read documentation https://docs.angularjs.org/api/ngResource/service/$resource

timeout – {number} – timeout in milliseconds. Note: In contrast to $http.config, promises are not supported in $resource, because the same value would be used for multiple requests. If you are looking for a way to cancel requests, you should use the cancellable option.

Also you can read this article: http://corpus.hubwiz.com/2/angularjs/21666960.html

edited May 10, 2017 at 6:11

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered May 9, 2017 at 18:05

Sergaros

8411 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

AngularJS: Minimal example with $resource and timeout

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related