axios常见传参方式

冷不防 2023-06-30 09:07 40阅读 0赞

# [https://www.cnblogs.com/zhaojunhao/p/9622004.html][https_www.cnblogs.com_zhaojunhao_p_9622004.html] #

**1:get请求**

一般发送请求是这么写

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>axios.get(</code><code>'/user?id=12345&amp;name=user'</code><code>)</code> <code>.then(</code><code>function</code>&nbsp;<code>(res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(res);</code> <code>}).</code><code>catch</code><code>(</code><code>function</code>&nbsp;<code>(err) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(err);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

但是为了方便全局统一调用封装的axios

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>axios.get(</code><code>'/user'</code><code>, {&nbsp;&nbsp;</code><code>//params参数必写 , 如果没有参数传{}也可以</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>params: {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>id: 12345，</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: user</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>})</code> <code>.then(</code><code>function</code>&nbsp;<code>(res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(res);</code> <code>})</code> <code>.</code><code>catch</code><code>(</code><code>function</code>&nbsp;<code>(err) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(err);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**2.post/put/patch请求　**

(1) 传参格式为 formData

（全局请求头:'Content-Type'= 'application/x-www-form-urlencoded'）

（request的Header:'Content-Type'= 'multipart/form-data'）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>var</code>&nbsp;<code>formData=</code><code>new</code>&nbsp;<code>FormData();</code> <code>formData.append(</code><code>'user'</code><code>,123456);</code> <code>formData.append(</code><code>'pass'</code><code>,12345678);</code> <code>&nbsp;</code>&nbsp; <code>axios.post(</code><code>"/notice"</code><code>,formData)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.then((res) =&gt; { </code><code>return</code>&nbsp;<code>res})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code><code>return</code>&nbsp;<code>err})</code> </td> 
 </tr> 
 </tbody> 
</table>

(2) 传参格式为 query 形式

（全局请求头:'Content-Type'= 'application/x-www-form-urlencoded'）

（request的Header:'Content-Type'= 'application/x-www-form-urlencoded'）

第一种情况：使用$qs.stringify

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>import</code>&nbsp;<code>Qs from&nbsp;</code><code>'qs'</code>&nbsp;&nbsp;&nbsp;<code>//引入方式</code> <code>Vue.prototype.$qs = Qs&nbsp;&nbsp;</code><code>//全局加载</code> <code>this</code><code>.$qs.stringify(data);&nbsp;&nbsp;</code><code>//使用方式</code> <code>this</code><code>.$qs.parse(data);&nbsp;&nbsp;</code><code>//使用方式</code> <code>&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>readyData=</code><code>this</code><code>.$qs.stringify({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>id:1234,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:user</code> <code>});</code> <code>axios.post(</code><code>"/notice"</code><code>,readyData)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.then((res) =&gt; { </code><code>return</code>&nbsp;<code>res})</code> <code>&nbsp;&nbsp;&nbsp; &nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code><code>return</code>&nbsp;<code>err})</code> </td> 
 </tr> 
 </tbody> 
</table>

更多qs功能参考：[https://www.npmjs.com/package/qs][https_www.npmjs.com_package_qs]

第二种情况：使用URLSearchParams

在浏览器中，您可以使用URLSearchParams API，如下所示：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>var</code>&nbsp;<code>params =&nbsp;</code><code>new</code>&nbsp;<code>URLSearchParams();</code> <code>params.append(</code><code>'param1'</code><code>,&nbsp;</code><code>'value1'</code><code>);</code> <code>params.append(</code><code>'param2'</code><code>,&nbsp;</code><code>'value2'</code><code>);</code> <code>axios.post(</code><code>'/foo'</code><code>, params);</code> </td> 
 </tr> 
 </tbody> 
</table>

注意：所有浏览器都不支持URLSearchParams，但是有一个polyfill可用（确保polyfill全局环境）。

(3) 传参格式为 raw (JSON格式)

第一种情况： axios将JavaScript对象序列化为JSON

（全局请求头:'Content-Type'= 'application/x-www-form-urlencoded'）

（request的Header:'Content-Type'= 'application/json;charset=UTF-8'）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code>&nbsp;<code>readyData={ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>id:1234,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:user</code> <code>};</code> <code>axios.post(</code><code>"/notice"</code><code>,readyData)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.then((res) =&gt; { </code><code>return</code>&nbsp;<code>res})</code> <code>&nbsp;&nbsp;&nbsp; &nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code><code>return</code>&nbsp;<code>err})</code> </td> 
 </tr> 
 </tbody> 
</table>

第二种情况：

（全局请求头:‘Content-Type'= 'application/json;charset=UTF-8'）

（request的Header:‘Content-Type'= 'application/json;charset=UTF-8'）

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>var</code>&nbsp;<code>readyData=JSON.stringify({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>id:1234,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:user</code> <code>});</code> <code>axios.post(</code><code>"/notice"</code><code>,readyData)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.then((res) =&gt; { </code><code>return</code>&nbsp;<code>res})</code> <code>&nbsp;&nbsp;&nbsp; &nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code><code>return</code>&nbsp;<code>err}</code> </td> 
 </tr> 
 </tbody> 
</table>

[https_www.cnblogs.com_zhaojunhao_p_9622004.html]: https://www.cnblogs.com/zhaojunhao/p/9622004.html
[https_www.npmjs.com_package_qs]: https://www.npmjs.com/package/qs