在使用 Axios 發(fā)送 HTTP 請求時，GET 和 POST 請求攜帶參數(shù)的方式有所不同。以下是關(guān)于這兩種請求方法攜帶參數(shù)的詳細(xì)講解：

GET 請求攜帶參數(shù)

對于 GET 請求，參數(shù)通常附加在 URL 之后，以查詢字符串的形式傳遞。

1. 直接在 URL 中拼接參數(shù)：

   • 可以直接將參數(shù)以鍵值對的形式拼接在 URL 后面。
   • 例如：axios.get('/user?name=Kimi&age=30')。

2. 使用 params 參數(shù)：

   • Axios 允許你通過 params 配置項傳遞一個對象，Axios 會自動將對象序列化為查詢字符串并附加到 URL 上。
   • 例如：

     axios.get('/user', {params: {name: 'Kimi',age: 30}
     });
     

   • 這將生成一個帶有查詢參數(shù)的請求：/user?name=Kimi&age=30。

3. params 配置項：

   • params 配置項還可以接受一個函數(shù)，這個函數(shù)會被調(diào)用以序列化參數(shù)。
   • 例如：

     axios.get('/user', {params: {name: 'Kimi',age: 30,// 使用函數(shù)來自定義參數(shù)序列化paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'});}}
     });
     

   • 這可以用于更復(fù)雜的參數(shù)序列化需求。

POST 請求攜帶參數(shù)

對于 POST 請求，參數(shù)通常包含在請求體中。

1. 直接在 data 中傳遞參數(shù)：

   • 發(fā)送 POST 請求時，可以直接將參數(shù)作為對象傳遞給 data 配置項。
   • 例如：

     axios.post('/user', {name: 'Kimi',age: 30
     });
     

   • Axios 會自動將對象序列化為 JSON 字符串，并設(shè)置 Content-Type 頭部為 application/json。

2. 使用 FormData：

   • 如果需要發(fā)送表單數(shù)據(jù)，可以使用 FormData 對象，并將其傳遞給 data 配置項。
   • 例如：

     let formData = new FormData();
     formData.append('name', 'Kimi');
     formData.append('age', '30');
     axios.post('/user', formData);
     

   • 這將使用 multipart/form-data 編碼發(fā)送表單數(shù)據(jù)。

3. 自定義 Content-Type：

   • 如果需要發(fā)送其他類型的數(shù)據(jù)（如 application/x-www-form-urlencoded），可以自定義 transformRequest 配置項來修改請求數(shù)據(jù)的格式。
   • 例如：

     axios.post('/user', {name: 'Kimi',age: 30
     }, {headers: {'Content-Type': 'application/x-www-form-urlencoded'},transformRequest: [function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';}return ret;}]
     });
     

   • 這將把 JSON 對象轉(zhuǎn)換為 application/x-www-form-urlencoded 格式的字符串。

總結(jié)來說，GET 請求通常將參數(shù)附加在 URL 上，而 POST 請求將參數(shù)放在請求體中。Axios 提供了靈活的配置項來滿足不同的參數(shù)傳遞需求。