axios put 传参问题详解

一、PUT请求介绍

PUT请求是HTTP协议中的一种方法，用于向特定的URL提交更新的内容，比如在RESTful API中常用于更新资源。

二、axios简介

axios是一种基于Promise的HTTP客户端，可以用于浏览器和Node.js。axios属于第三方插件，需先安装后引入使用。

三、axios.put用法

PUT请求的参数可以通过 URL 或者 body 发送，并且 body 参数只可以用 JSON 格式的字符串或 ArrayBuffer，Blob，FormData。

常用的put方法是axios.put(url[, data[, config]])。

其中，url是请求的url地址（必填）；data是请求参数（非必填）；config中可以配置header、timeout等信息（非必填）。

axios.put('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上是最基本的使用方法，直接传递参数即可。

四、PUT请求传参问题

在使用axios时，有很多人遇到的问题是PUT请求的参数传递不成功。下面分别说明PUT请求时常遇到的两个问题。

五、问题一、后台无法获取到参数

出现这个问题的主要原因是参数没有设置Content-Type，导致后台无法解析传过去的参数。解决方法为在请求头里设置Content-Type为application/json。

axios.put(url, data, {
  headers: {
    "Content-Type": "application/json"
  }
})

在以上格式中，data是请求参数。

六、问题二、参数传递为undefined

这个问题的原因是使用了qs.stringify()对参数进行的序列化，但是在PUT和PATCH请求中，使用axios默认的qs.stringify()序列化参数时将把传入的数据转换为类似 firstName=John&lastName=Doe 的格式，即 URL 拼接参数。而在后端框架对 PUT 请求的参数解析时只解析 application/json Content-Type，而不会对 URL 拼接参数进行解析，所以后端框架解析到的参数是 undefined。

解决方法也很简单，只需将data数据类型转换为application/json Content-Type类型即可。

axios.put(url,JSON.stringify(data),{
    headers: {'Content-Type': 'application/json'}
})

在以上格式中，data是请求参数。

七、总结

本文主要从PUT请求介绍、axios简介、axios.put用法和PUT请求传参问题四个方面对axios put传参问题进行了详细的阐述，其中解决了常见的两个传参问题。