axios put传参问题

一、基本介绍

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请求。具体解决方法应根据实际情况进行选择。