Axios Cancel Request
Axios supports a limited mechanism for cancelling requests. The syntax is straightforward: you pass a cancelToken option
to your Axios request, and calling cancel() makes your request error out.
The cancelToken Option
The options parameter to Axios functions supports a cancelToken
option. The Axios global has a CancelToken object that can create a cancel token for you as shown below.
const axios = require('axios');
const source = axios.CancelToken.source();
const cancelToken = source.token;
const req = axios.get('http://httpbin.org/get?answer=42', {
cancelToken
});
await new Promise(resolve => setImmediate(resolve, 0));
// To cancel the request, call `cancel()` on the `source`.
source.cancel('test cancellation');
// Cancellation results in a rejected promise. But you can use
// Axios' `isCancel()` function to check whether the error is
// due to a cancelled request.
const err = await req.catch(err => err);
axios.isCancel(err); // trueNote that axios.CancelToken.source() returns a source object, not the token itself. Make sure you
pass the token as the cancelToken option, not the source object. Otherwise you'll get a
"config.cancelToken.throwIfRequested is not a function" error.
The source.cancel() function takes a single parameter: an optional error message. The error
message is just for passing a reason for the cancellation, you can use whatever string makes sense
for your application, or omit the message entirely.
How Does Cancellation Actually Work?
Under the hood, when you cancel() a request, Axios calls ClientRequest#abort() in Node.js or XMLHttpRequest#abort() in the browser. However, this
does not guarantee that the HTTP request doesn't end up getting sent to the server.
For example, the below script still prints "Got request!" even though Axios cancels the request. That's because there's no way to cancel an HTTP request in general once the request has already been sent over the network. If Axios has already sent the request, all cancel does is cause your Axios request to error out and ignore any response the server sends after cancellation.
const express = require('express');
const app = express();
// Express never sends a response, so this request will hang forever.
app.get('*', function(req, res) {
console.log('Got request!');
});
const server = await app.listen(3000);
// Now make an HTTP request to the server and cancel it.
const axios = require('axios');
const source = axios.CancelToken.source();
const cancelToken = source.token;
const req = axios.get('http://localhost:3000', {
cancelToken
});
await new Promise(resolve => setTimeout(resolve, 500));
source.cancel('test cancellation');
// Got error, but still prints "Got request!"
const err = await req.catch(err => err);
axios.isCancel(err); // trueSo is cancellation useless? Not necessarily. Cancelling requests can be useful in the browser if you want to clean up any outstanding requests when, say, the user navigates to another page. Just remember: even if you cancel a request, there is a good chance the request will still end up going to the server. So if you send a PUT request that modifies data, that request may still get to the server and modify the data, so your client may be out of date if you cancel an HTTP request.