一、基本介紹

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

二、axios put傳參問題的出現(xiàn)

當(dāng)使用axios進(jìn)行put請求時，使用data傳遞參數(shù)時，可能會出現(xiàn)參數(shù)沒有被正確傳遞的情況。具體問題表現(xiàn)為，后端收到的參數(shù)為空。

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

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

三、解決方法一：使用headers

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

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

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

四、解決方法二：使用FormData

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

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

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

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

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

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

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

六、總結(jié)

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