在 axios post 傳參數時使用 data 跟使用 formData = new FormData(); 的差別

在Axios中，使用data和使用FormData兩種方式來傳遞參數有一些重要的區別，這些區別主要涉及到數據的格式和如何處理不同類型的數據：

1. 數據格式:

   • 使用 data：當使用 data 參數時，通常傳遞一個JavaScript對象，Axios會自動將其轉換為JSON格式，並設置Content-Type標頭為application/json。這種方式通常用於傳遞結構化的數據。

   • 使用 FormData：FormData 對象用於以表單數據的形式傳遞數據，通常用於文件上傳或需要模擬HTML表單提交的情況。它將數據格式化為multipart/form-data，適合處理二進位文件和大型數據。

2. 內容類型:

   • 使用 data：Content-Type 被設置為 application/json，適用於 JSON 數據。

   • 使用 FormData：Content-Type 被設置為 multipart/form-data，適用於模擬表單提交或上傳文件。

3. 參數結構:

   • 使用 data：通常用於結構化的數據，例如 { key1: 'value1', key2: 'value2' }。

   • 使用 FormData：用於模擬表單數據，且允許添加參數和檔案。

總結來說，選擇使用哪種方式取決於您的具體需求：

• 如果您需要傳遞結構化的數據，並且希望在Content-Type中使用application/json，則使用data。
• 如果您需要上傳檔案或以multipart/form-data的形式傳遞數據，則使用FormData。
• 如果您使用的後端服務期望特定格式的數據，請根據後端的要求選擇。

以下是使用data和FormData的範例說明：

使用 data 傳遞 JSON 數據：

假設希望傳遞一個JSON對象到後端，並將Content-Type設置為application/json，可以參考以下範例：

const dataToSend = {
  key1: 'value1',
  key2: 'value2',
};

axios.post('https://example.com/api', dataToSend)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用 FormData 傳遞表單數據：

假設希望模擬表單提交，包括文本字段和檔案上傳，可以參考以下範例：

const formData = new FormData();
formData.append('name', 'John');
formData.append('email', '[email protected]');
formData.append('profileImage', fileInput.files[0]); // 假設有一個文件輸入

axios.post('https://example.com/api', formData)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

請根據需求選擇適當的方法來傳遞數據，這兩種方式分別適用於不同的情境。