<p dir="auto">XMLHttpRequest is discouraged and will be more rare to be found in the <a href="https://github.com/whatwg/xhr/issues/19#issuecomment-106977644" data-hovercard-type="issue" data-hovercard-url="/whatwg/xhr/issues/19/hovercard">new contexts like service worker</a>.</p>
<p dir="auto">Should <code class="notranslate">axios</code> use <code class="notranslate">fetch</code> when <code class="notranslate">XMLHttpRequest</code> is not available?</p>
<h4 dir="auto">Describe the bug</h4>
<p dir="auto">When specifying an expected <code class="notranslate">response.data</code> type to the post method it also sets that expected type to the request body. Also, when not specifying a type, the type for the <code class="notranslate">response.data</code> gets inferred to be the same as the type of the request body. This leads to typescript errors in VS Code and during compile time when the response and request bodies in code doesn't have the same type (which is usually the case). This was not an issue in v0.21.4 - which I reverted to in order to get around this issue.</p>
<h4 dir="auto">To Reproduce</h4>
<ol dir="auto">
<li>Install axios v0.22.0</li>
<li>Add a type for the <code class="notranslate">response.data</code> like in this example:</li>
</ol>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="axios.post&lt;ExpectedResponseBody&gt;(`post url`, { foo: &quot;bar&quot; }, {});"><pre class="notranslate"><span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-en">post</span><span class="pl-kos">&lt;</span><span class="pl-smi">ExpectedResponseBody</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-s">`post url`</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">foo</span>: <span class="pl-s">"bar"</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Also look at the CodeSandbox example <a href="https://codesandbox.io/s/axios-v0-22-0-type-issue-joty3?file=/src/App.tsx:897-1031" rel="nofollow">here</a></p>
<h4 dir="auto">Expected behavior</h4>
<p dir="auto">When specifying the expected type of the <code class="notranslate">response.data</code> in the post call, the request body shouldn't have the same expected type. And the inferred type for the request body shouldn't automatically get applied to <code class="notranslate">response.data</code>.</p>
<h4 dir="auto">Environment</h4>
<ul dir="auto">
<li>Axios Version 0.22.0</li>
<li>Adapter N/A</li>
<li>Browser N/A</li>
<li>Browser Version N/A</li>
<li>Node.js Version: 14.17.3</li>
<li>OS: Win 10</li>
<li>Additional Library Versions: Typescript 4.4.3</li>
</ul>
<h4 dir="auto">Additional context/Screenshots</h4>
<p dir="auto">Type for post method in axios v0.21.4<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22648295/135825306-2f1850cf-4200-4766-899a-057a98b4fe3c.png"><img src="https://user-images.githubusercontent.com/22648295/135825306-2f1850cf-4200-4766-899a-057a98b4fe3c.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Type for post method in axios v0.22.0. Note that <code class="notranslate">T</code> is also set to request data and config in this version - which is what I believe is the cause of the issue.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/22648295/135825453-d7abbb3a-4db1-4fd3-98a0-b25567c633a0.png"><img src="https://user-images.githubusercontent.com/22648295/135825453-d7abbb3a-4db1-4fd3-98a0-b25567c633a0.png" alt="image" style="max-width: 100%;"></a></p>