Axios發送POST請求帶參數詳解

一、Post請求的作用和使用場景

Post請求可以用於向服務器提交數據，適用於新增或修改數據的場景。

使用Post請求時，一般需要將數據作為請求體的一部分傳遞過去，可以是JSON格式或formdata格式。常見的Post請求場景包括表單提交、上傳文件、登錄等。

二、Axios的使用介紹

Axios是一個基於Promise的HTTP客戶端，可以用於在瀏覽器和Node.js中發送HTTP請求。相較於其他類似庫，Axios的優點在於：

1.可以同時在瀏覽器和Node.js中使用，避免了兼容性問題；

2.支持Promise API，可以使用async/await的語法進行異步調用；

3.可對請求和響應進行攔截和轉換，方便請求前的處理和響應後的統一處理。

在使用Axios時，需要先將其引入到項目中，可以使用npm進行安裝。

npm install axios --save

三、Axios發送POST請求帶參數的方法

1.在請求體中傳遞JSON格式數據

在Axios中通過配置config對象的data屬性傳入傳輸數據

axios.post('/api/data', {foo: 'bar'})
 .then(response => {
     console.log(response)
 })
 .catch(error => {
     console.log(error)
 })

以上代碼可以向 ‘/api/data’ 發送Post請求，並將數據{foo: ‘bar’}作為請求體的一部分進行傳輸。另外，如果需要設置請求頭可以在config中設置headers屬性。

2.在請求體中傳遞formdata格式數據

當需要上傳文件或代碼中需要提交複雜對象時，使用JSON格式的數據就不再合適了。此時我們可以使用FormData API。

const data = new FormData();
data.append('file', file);
data.append('name', name);
axios.post('/api/upload', data)
 .then(response => {
     console.log(response)
 })
 .catch(error => {
     console.log(error)
 })

以上代碼使用FormData API生成一個data對象，然後將文件和其他表單元素數據添加到該對象中。Axios會自動將數據轉換為formdata格式並發送到服務器。

3.在請求url中傳遞參數

在URL中添加查詢參數是一種常見的方法。Axios使用params屬性來配置查詢參數。

axios.post('/api/data', {params: {id: 123}})
 .then(response => {
     console.log(response)
 })
 .catch(error => {
     console.log(error)
 })

以上代碼請求URL為 ‘/api/data’ + ‘?id=123’。

4.在請求體中傳遞自定義頭部

在Axios中可以使用Headers對象來設置自定義頭部。

const config = {
    headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
    },
};
axios.post('/api/data', {foo: 'bar'}, config)
 .then(response => {
     console.log(response);
 })
 .catch(error => {
     console.log(error);
 })

以上代碼設置了Content-Type和X-Requested-With兩個自定義頭部，並將其添加到config中。Axios會將config中的headers屬性傳遞到發送請求的對象中。

結論

Axios是一款功能強大，易於使用，可靠性高的HTTP客戶端工具，可以非常方便地發送POST請求並且攜帶不同類型的參數，包括formdata格式、自定義頭等。通過前面的介紹，希望能夠對axios發送Post請求帶參數的方法有一個更加深刻的理解，使用中能夠更加熟練地應對不同情況下請求參數的需求。