Axios only called once inside self-invoking function (Internet Explorer)

Question

I have a function that calls itself every 2.5 seconds to check on a task running in the background. It calls axios to get a url if the response is an error, and if the response is successful, I stop the function.

This works perfectly on Chrome and in Mozilla but for some reason it doesn't work in IE (version 11). The function calls itself infinitely, but checking the logs show that it only calls axios once, then it has res.data.err == "Task not ready" looping forever, even if the task on back-end has already finished.

Why isn't axios being invoked again on IE? Is there anything I'm missing?

checkProgress() { 
    axios.get(url.CHECK_UPLOAD_TASK, { params: { id: this.state.taskID} }).then(res => {
        if(res.data.success){
            this.setState({loading: false});
            //do something if successfully finished task
        } else {
            if(res.data.err == "Task not ready") {
                setTimeout(() => {
                    this.checkProgress();
                },2500);
            } else {
                this.setState({loading: false});
                // do something if task had an error
            }
        }
    });
}

Answer 1

I have encountered a similar issue (although using fetch) on InternetExplorer as well (11, Edge) for polling a service. I found that using the "Pragma: no-cache" header solved it.

You could give it a try :

const config = {
    headers: { Pragma: 'no-cache'},
    params: { id: this.state.taskID }
}

the call should look like:

axios.get(url.CHECK_UPLOAD_TASK, config).then(...)

Answer 2

Thanks Daniel, That would be great. It works for me. One more solution is you can define inside axios.create as below, and we can use it normally. Tested both solutions and works well!

const api = axios.create({
  headers: { Pragma: 'no-cache' },
});

Of course you have to use api.get(...) instead of axios.get(...).

Hope it helps!