Cancelling angular $http.jsonp results in javascript error

Question

I'm using Angular version 1.2.1 and I'm attempting to implement cancelation in my application when a new request of the same type is initialized. I used the code examples here but I couldn't get it to work. I think this is due to the fact that I am using $http.jsonp().

When I cancel a jsonp request the .then callbacks are never called (as expected) but the request is not cancelled and when the response comes I get an undefined error in the console (the jsonp callback function no longer exists).

How do I avoid getting this console error? Is it possible to cancel a jsonp request alltogheter?

http://jsfiddle.net/HB7LU/8668/

HTML:

<div ng-controller="MyCtrl">
    <span ng-bind="status"></span>
    <hr>
    <a href ng-click="doStuff()">
        Start
    </a>
    <hr>
    <a href ng-click="cancel()">
        Cancel
    </a>
</div>

JS:

var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $q, $http) {
    $scope.status = "Idle";

    $scope.doStuff = function() {
        var canceller = $q.defer();
        $scope.status = "Ongoing";
        $scope.getting = $http.jsonp('http://cruisebookingapi.ving.se/cruisePackage/search/1/STO/141220/false/20141211/42,42/-1?callback=JSON_CALLBACK', {timeout: canceller.promise});
       $scope.getting.then(function(data) {
            $scope.status = "Finished";
            console.log(data);
        });
        $scope.cancel = function() {
            $scope.status = "Cancelled";
            canceller.resolve('Cancel all the things');
        };
    };
}

I think you're really onto something here... this should cancel — SoluableNonagon
– SoluableNonagon, Commented Dec 1, 2014 at 17:58
JSONP doesn't use XMLHttpRequest, but instead injects a <script> tag into the page. You cannot abort loading of script tags. — tasseKATT
– tasseKATT, Commented Dec 1, 2014 at 21:00
Not aborting the actual request would be fine, as long as the promise is not resolved (as it is not in my example). What bugs me is the javascript error in the console. — Daniel Edholm Ignat
– Daniel Edholm Ignat, Commented Dec 1, 2014 at 21:46
May i suggest corsproxy.com? would make your site a bit safer from malicious javascript code ving.se can inject to your site throught `<script>´ tag. With CORS you get progress, real abortion, timeout, security, stateChange event as a bonus — Endless
– Endless, Commented Dec 4, 2014 at 13:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I tried upgrading angularjs to version 1.2.27 (I should have tried that first!) and the issue was no longer there. After a bit of digging on GitHub I found the fix. Fixed since version 1.2.8

https://github.com/angular/angular.js/commit/95e1b2d6121b4e26cf87dcf6746a7b8cb4c25e7f

fix($httpBackend): cancelled JSONP requests will not print error in the console

When you cancel a JSONP request, angular deletes the callback for it. However the script still executes, and since the callback is now deleted and undefined, the script throws an exception visible in the console. The quick fix for this is not to delete the callback, but replace it with angular.noop.

Closes #5615

Closes #5616

The change that fixes the issue:

-        delete callbacks[callbackId];
+        callbacks[callbackId] = angular.noop;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 2, 2014 at 9:27

Daniel Edholm Ignat

2682 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Cancelling angular $http.jsonp results in javascript error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related