一、基本介紹

axios是一個基于Promise的HTTP請求客戶端，可用于瀏覽器和Node.js。對于put請求，通常傳遞的參數是在請求體中的，而并不是在url中。axios提供了兩種傳參的方式，分別是params和data。其中params主要是對于get請求的參數進行傳遞，而data主要是對于put、post請求的請求體進行傳遞。但是在axios put請求中，使用data傳遞參數，有時候會出現問題。接下來將從以下幾個方面來詳細探究這個問題。

二、axios put傳參問題的出現

當使用axios進行put請求時，使用data傳遞參數時，可能會出現參數沒有被正確傳遞的情況。具體問題表現為，后端收到的參數為空。

axios.put("/api/user/1234", {
    name: "John Doe",
    age: 25
})

在前端中的請求體為{name: "John Doe", age: 25}，但后端可能收到的是一個空對象，即{ }。

三、解決方法一：使用headers

針對這個問題，我們首先可以嘗試使用headers向后端傳遞參數。在axios的默認配置中，axios會將data里的數據以JSON格式發送到后端，所以我們可以通過設置headers來傳遞參數。

axios.put("/api/user/1234", {}, {
    headers: {
        "Content-Type": "application/json",
        "name": "John Doe",
        "age": 25
    }
})

在這個請求中，我們將data設置為空對象，然后將參數以headers的方式進行傳遞。在后端中，可以通過req.headers獲取這些參數。

四、解決方法二：使用FormData

第二種解決方法，是使用FormData。FormData是HTML5新增的一種能夠將多個表單元素的值合并到一起，以鍵值對的形式存儲，然后使用ajax將表單數據提交到后端的技術。我們可以使用FormData將表單數據合并為一個鍵值對，然后再傳遞給axios。

const formData = new FormData();
formData.append("name", "John Doe");
formData.append("age", 25);
axios.put("/api/user/1234", formData)

在這個請求中，我們使用了FormData將參數{name: "John Doe", age: 25}合并為formData對象。然后將formData對象作為參數傳遞給axios。在后端中，可以通過req.body獲取這些參數。

五、解決方法三：更換請求方式

如果以上兩種方法都不能解決問題，我們可以考慮更換請求方式。在put請求有問題時，可以嘗試使用post請求來代替。在請求體中傳遞參數時，使用data傳參一般是沒有問題的。同時，后端也需要將post請求接口處理一下，不能直接將請求體中的參數當作url參數處理。

axios.post("/api/user/1234", {
    name: "John Doe",
    age: 25
})

在這個請求中，我們使用了post請求，將參數{name: "John Doe", age: 25}通過data傳遞給后端。等價于使用put請求，并且使用headers或FormData傳遞參數的方式。

六、總結

在使用axios進行put請求傳遞參數時，可能會出現參數傳遞不成功的問題。主要原因是傳遞方式不正確，或者后端沒有正確處理數據。我們可以通過使用headers或FormData來傳遞參數；或者使用post請求來代替put請求。具體解決方法應根據實際情況進行選擇。