<h2 dir="auto">Summary</h2>
<p dir="auto">Hi! I'm getting some of my POST requests duplicated at my API, and I was wondering if an axios request could have been automatically retried/sent again in case of connection failure, reset, or any other reason.</p>
<p dir="auto">As this is a random behavior and it's happening in production/users machines, it is being a kinda difficult to collect any evidence. Maybe you guys have experienced, or have acknowledge of something similar to my scenario.</p>
<p dir="auto">All users that reported duplication in their actions also experienced a abnormal wait time.</p>
<p dir="auto">I have checked the action creator that calls axios.create, and it is being dispatched just one time by an onClick event.</p>
<p dir="auto">Thanks in advance!</p>
<h2 dir="auto">Context</h2>
<ul dir="auto">
<li>"axios": "^0.15.3"</li>
<li>"react": "15.0.2",</li>
<li>"react-redux": "^4.0.0",</li>
<li>Chrome 58.0.3029.81 (64-bit), Windows 10 64-bits</li>
<li>Asp.net WebApi</li>
</ul>
<p dir="auto">I've spent a few hours today trying to get a post request to work with a few parameters and a file that I need to upload.</p>
<p dir="auto">I was able to make it work with pure javascript and XMLHttpRequest but it doesn't work with Axios. What am I doing wrong?</p>
<p dir="auto">Here's the code that works using XMLHttpRequest:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob([payload], { type: 'text/csv' }));

// this works
let request = new XMLHttpRequest();
request.open('POST', url);
request.send(data);"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">FormData</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s">'action'</span><span class="pl-kos">,</span> <span class="pl-s">'ADD'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s">'param'</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s">'secondParam'</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s">'file'</span><span class="pl-kos">,</span> <span class="pl-k">new</span> <span class="pl-v">Blob</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s1">payload</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'text/csv'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// this works</span>
<span class="pl-k">let</span> <span class="pl-s1">request</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">XMLHttpRequest</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">request</span><span class="pl-kos">.</span><span class="pl-en">open</span><span class="pl-kos">(</span><span class="pl-s">'POST'</span><span class="pl-kos">,</span> <span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">request</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s1">data</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">What would be the 'Axios' version of that?</p>
<p dir="auto">Here's one of my tries (the simple one):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// this won't work
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
    axios.post(url, data, config)
    .then(response =&gt; console.log(response))
    .catch(errors =&gt; console.log(errors));"><pre class="notranslate"><span class="pl-c">// this won't work</span>
<span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">headers</span>: <span class="pl-kos">{</span> <span class="pl-s">'Content-Type'</span>: <span class="pl-s">'multipart/form-data'</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-en">post</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">,</span> <span class="pl-s1">data</span><span class="pl-kos">,</span> <span class="pl-s1">config</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-s1">response</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-s1">errors</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">errors</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Thank you! And thanks for your great work with Axios!</p>