例子:
let data = { id: 12, name: '測試', list: [{ id: 22, name: "za", age: 12 }] };// 創建 FormData 實例
????????要使用 FormData
將數據提交給接口,首先需要了解 FormData
是如何工作的。FormData
是一種用于異步上傳數據的表單數據結構,它可以讓你以一種簡單的方式發送鍵值對。
????????例子中,你有一個 JavaScript 對象 data
,它包含了嵌套的數據結構。要將這個對象轉換為 FormData
,我們需要遍歷這個對象,并將每個鍵值對添加到 FormData
實例中。
????????下面是一個示例代碼,展示了如何將你的 data
對象轉換為 FormData
,并使用 fetch
API 將其提交給接口:
let data = { id: 12, name: '測試', list: [{ id: 22, name: "za", age: 12 }] };// 創建 FormData 實例
let formData = new FormData();// 函數用于遞歸地將對象添加到 FormData
function addToFormData(obj, formData) {for (let key in obj) {if (obj.hasOwnProperty(key)) {// 如果是對象,則遞歸調用if (typeof obj[key] === 'object') {addToFormData(obj[key], formData);} else {// 否則,直接添加formData.append(key, obj[key]);}}}
}// 將數據添加到 FormData
addToFormData(data, formData);// 使用 fetch API 提交 FormData
fetch('YOUR_ENDPOINT_URL', {method: 'POST',body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
????????在這個代碼中,我們首先定義了一個 addToFormData
函數,它遞歸地遍歷對象并將每個鍵值對添加到 FormData
實例中。然后,我們使用 fetch
API 將 FormData
發送到服務器。請確保替換 'YOUR_ENDPOINT_URL'
為你的實際接口 URL。