Skip to content

Instantly share code, notes, and snippets.

@mzabriskie
Created March 18, 2015 15:35
Show Gist options
  • Save mzabriskie/ec3a25dd45dfa0de92c2 to your computer and use it in GitHub Desktop.
Save mzabriskie/ec3a25dd45dfa0de92c2 to your computer and use it in GitHub Desktop.
axios abort request
/**
* The problem with using Promises for a request API is that Promises
* make it difficult to abort the request. Typically when using XHR
* some factory will wrap the actual XHR, but ultimately will return
* the XHR object.
*
* ```
* var request = performRequest('/user/12345');
* request.abort();
* ```
*
* Using Promises, the Promise is what's returned.
*
* ```
* var promise = performRequest('/user/12345');
* promise.then((response) => { console.log(response); });
* ```
*
* How then can the request be aborted?
*
* Working on axios (https://github.com/mzabriskie/axios),
* I get a lot of requests (no pun intended) for how to
* handle aborting a request once it's been made. This is
* a potential workaround for aborting a request when using
* XHR with Promises.
*/
// Setup request config and initiate the request
var config = {
method: 'get',
url: '/user/12345'
};
axios(config);
// Internally axios will add a requestID property to the
// request config. This is an auto incrementing integer
// that is unique to the request.
console.log(config); // {method: 'get', url: '/user/12345', requestID: 0}
// Now the request can be aborted by passing the requestID
// to axios.abort. Behind the scenes axios will have a
// collection of requests indexed by requestID. The request
// can then be aborted if it hasn't already been fulfilled.
// This is very similar to how setTimeout/clearTimeout works.
axios.abort(config.requestID);
@esnunes
Copy link

esnunes commented Jan 21, 2016

any news on this? I believe it should reject the promise with an Abort state. How would it work with es7 async await, e.g:

const { data } = await axios({
  url: '/some/url',
});

In case the promise doesn't get rejected the code about would stuck forever.

@rauchg
Copy link

rauchg commented Feb 7, 2016

Agreed with @esnunes. Aborting it is an error in the fulfillment of the promise's goal (which was to "return" the response data). Just because it's developer-initiated it doesn't mean it's not an error in the request flow.

@diessica
Copy link

diessica commented May 13, 2016

Agreed with @herrstucki's comment. cancelPreviousRequest would be pretty useful!

@chadwilken
Copy link

This doesn't seem to work on 0.15.3. Is there a way to do it now? I see there are cancellation tokens but I want to be able to prevent duplicate requests to the same URL from executing if one is still pending.

@Braunson
Copy link

Braunson commented Apr 28, 2017

@mzabriskie Any updates on this, interested to. abort() isn't an option in the latest, cancelPreviousRequest would be useful. I know the latest supports cancelTokens now but they don't work for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment