Undefined : TypeError xhr.abort is not a function : Backbone

Question

I am using Backbone js and based on the route a fetch operation is initiated. So for different routes different collections' fetch operation is initiated and the page view is updated with the content. If we wait for the dom to get updated and then proceed to a different route, then there's no problems. But if I switch routes immediately, two fetch operations go around in the background and the view gets updated with the first and then the second one which is not desirable. I searched around and came to know we can assign a variable to fetch operation which will return jqxHr object on which we can call abort(). Also came across as to how to store all pending requests in a pool and cancel them all.

Following is the code am trying to make work so as to implement it across routes.

var collection = new TableCollection();
var xhr = collection.fetch();
xhr.abort();

But am running into

Undefined : TypeError xhr.abort is not a function : Backbone

When I console.log(xhr) I get an Object which has these properties:

Object {}always: ()catch: (a)done: ()fail: ()pipe: ()progress: ()promise: (a)state: ()then: (b,d,e)__proto__:

I am using Jquery 3.1.0, Backbone 1.3.3, Underscore 1.8.3.

Any pointers and suggestions would be helpful.

Akhilesh Balachandder Akhilesh Balachandder · Accepted Answer · 2016-08-15T08:52:49

So I figured out the problem.

I was using an external override view backbone-fetch-cache.js which was used to cache the fetch calls. This library overrides the default fetch operation of backbone. It was returning a promise object instead of normal jqXhr object. So I modified the existing library in order to return the jqXhr object and not a promise and I got access to the abort method.

Undefined : TypeError xhr.abort is not a function : Backbone

1 Answers