Aborting a request midflight about vue-resource HOT 13 CLOSED

@sahibalejandro I've tried this.The beforeSend's arguments is a request object,But it's property xhr is null

from vue-resource.

Yes, it's possible to add a abort() function to the promise object, which the HTTP request function returns. This will allow a syntax similar to jQuery.

from vue-resource.

@steffans that's great news!

Always prefer the pragmatic approach over some dream of ideal architectural purity 😄

from vue-resource.

The way it currently works will have to be refactored a bit.

We now don't have access to the xhr outside the resolver function. If we are to augment the promise with an abort function, we'll need access to the underlying xhr object.

Probably something like this:

var request;

var promise = new Promise((resolve, reject) => {
    request = xhr(url, options, resolve, reject);
});

promise.abort = request.abort.bind(request);

from vue-resource.

Any examples about how to use this feature? I'm trying to use it but get abort is not a function error.

from vue-resource.

You could use the beforeSend callback to access the request object and a add your code to abort the current request.

this.$http.post('url', function (data) {}, {beforeSend: function(xhr) {
    // use XMLHttpRequest and add xhr.abort callback
}});

from vue-resource.

Nice, it works! I ended with something like this:

beforeSend(xhr) {
    if (globalXhr) {
        globalXhr.abort();
    }

    globalXhr = xhr;
}

from vue-resource.

@WilliamDu1981
I've just had the same issue and looked at the request object, it has a cancel function which aborts the request behind the scenes for you. The code below is working for me

beforeSend(xhr) {
    if (this.lastRequest) {
        this.lastRequest.cancel()
    }
    this.lastRequest = xhr
},

from vue-resource.

@BrockReece I've tried your code:

this.$http.get('/users',{},{
        beforeSend(xhr){
          debugger;
          if (this.lastRequest) {
            this.lastRequest.cancel()
          }
          this.lastRequest = xhr

        }
      });

but throw an error below:

App.vue?0940:60 Uncaught (in promise) TypeError: this.lastRequest.cancel is not a function(…)

The lastRequest object has not a method named cancel,and it is not a xhr(instance of XMLHttpRequest) object,it's a request object. why?

from vue-resource.

I don't know sorry.
The source shows the object should have a cancel method

https://github.com/vuejs/vue-resource/blob/a27faffb8dbf7a7d7a7aaa8e3792e93f48a8a8c5/src/http/client/xhr.js#L14

Can you console.log the lastRequest obj?

from vue-resource.

@BrockReece I've watched expression and screenshots,can you upload screenshots of your whole code

from vue-resource.

@WilliamDu1981 This is my code that works, what version of vue resource are you using?

this.$http.post(this.url, data, {
    beforeSend(xhr) {
        if (this.lastRequest) {
            this.lastRequest.cancel()
        }
        this.lastRequest = xhr
    },
}).then(response => {
...
}

from vue-resource.

@BrockReece I install it via npm,It should be the newest version。
I find the code in xhr.js:

var xhr = new XMLHttpRequest(), response = {request: request}, handler;

        request.cancel = () => {
            xhr.abort();
        };

I add breakpoints in this code and beforeSend,I found it execution after beforeSend,so when the beforeSend execution,the cancel method is not defined yet;

from vue-resource.