axios cancelled requests can't be restarted

Question

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.

Answer 1

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.

Answer 2

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();
}