Menu
I'm cancelling axios requests when the component unmounts as following
const CancelToken = axios.CancelToken
const source = CancelToken.source()
componentWillUnmount () {
source.cancel('message')
}
When the component is unmounted, the network requests happening in the background are flagged as 'stalled'. The problem is when the user goes to that component again, network requests supposed to happen in componentDidMount do no start.
385
CancelToken from axios is deprecated, so I suggest updating the documentation to use AbortController instead.
You can also cancel a request using a CancelToken. The axios cancel token API is based on the withdrawn cancelable promises proposal. You can create a cancel token using the CancelToken.
A CancellationToken enables cooperative cancellation between threads, thread pool work items, or Task objects. You create a cancellation token by instantiating a CancellationTokenSource object, which manages cancellation tokens retrieved from its CancellationTokenSource.
The syntax is straightforward: you pass a cancelToken option to your Axios request, and calling cancel () makes your request error out. The options parameter to Axios functions supports a cancelToken option.
The syntax is straightforward: you pass a cancelToken option to your Axios request, and calling cancel () makes your request error out. 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.
The default timeout for Axios' requests may be longer than the timeout for the parent process, which will swallow this error. Manually set your Axios request timeout to be short and you'll see the error, e.g. Sorry, something went wrong. could somebody explain what is the status of cancelled ?
This can be achieved by using AbortController, which is an inbuilt browser interface. *Note: this works with fetch, axios has its own implementation Signal represents a signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController object.
axios#cancellation describes two ways to use the cancelToken. You used the first way, with source.token/source.cancel. I started out that way, and had a similar problem as yours: Once a request to a particular URL was canceled, I could never get a successful response from that URL again. I switched to the second method using an executor function and the problem went away. I guess was sharing the same cancelToken for multiple requests, which is what they say you can do with the executor function method. Anyway, maybe that would work for you too.
139
After canceling set a new token.
let uploadCancelTokenSource = axios.CancelToken.source();
upload() {
const config = {
cancelToken: uploadCancelTokenSource.token,
};
}
cancel() {
uploadCancelTokenSource.cancel('Operation canceled by the user');
uploadCancelTokenSource = axios.CancelToken.source();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
