Why can't I cancel this Angular HTTP request?

Question

I'm using the code found from this SO post to cancel my HTTP requests mid-request if they time out:

var canceller = $q.defer();

$timeout(function() {
  canceller.resolve();
  alert("HTTP request failed.");
}, 5000);

$http({
  url: endpoint + "/encode",
  timeout: canceller.promise,
  data: {
    post: posts.post[id]
  }
}).success(successFunction);

However, I keep getting ReferenceError: timeout is not defined in my console. What could I possibly be doing wrong here?

Is your actual code missing the `$`? What does the stack trace say, which line does throw the exception? — Bergi, Apr 01 '16 at 02:45
Protip: `$timeout()` itself returns a promise. Better avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572). — Bergi, Apr 01 '16 at 02:48
Interesting, thanks for the tip. But this isn't interfering with my code now, correct? — Someone, Apr 01 '16 at 02:52
I don't think so. Regardless, the code you've shown us does not use a variable `timeout`, so that's not where the error comes from. — Bergi, Apr 01 '16 at 03:05
What is the version of angularjs you are using? And in your case you can directly give timeout:5000 instead of promise object. — Dhananjaya Kuppu, Apr 01 '16 at 03:40

score 1 · Answer 1 · answered Apr 01 '16 at 06:37

So without a plunker it's difficult to replicate but I successfully cancelled a http request using your code for inspiration. Plunker here

Controller.js

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

app.controller('MainCtrl', function($scope, $q, $http, $timeout) {

  $scope.msg = 'Not done it';

  var canceller = $q.defer();

  $scope.doThis = function() {
    $timeout(function() {
      canceller.resolve();
      $scope.msg = "I cancelled it";
    }, 1);

    $scope.msg = "I did it";
    var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
    var request = $http.get( url, {timeout: canceller.promise});
    request.success(function(results) {
      $scope.msg = "I loaded some data";
      $scope.data = results;
    });
  }
});

view.html

 <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>{{msg}}</p>
    <a href="" ng-click="doThis()">Do This</a>
    <p>
      {{data}}
    </p>
  </body>

That's really strange. Why do you think that my code won't work? — Someone, Apr 01 '16 at 23:41

Why can't I cancel this Angular HTTP request?

1 Answers1