使用axios.delete时后台接收不到参数的疑惑

本文详细解析了在使用Axios库进行HTTP DELETE请求时,如何正确传递参数的问题。不同于POST和PUT请求,DELETE请求的参数应置于config的data属性中,而非直接作为第二个参数。

这几天在学习使用 axios 的时候发现一个问题,在使用 axios.post 和 axios.put 时,后台均可以通过 req.body 访问到参数,但是使用 axios.delete 时后台却无法接收到参数,而网上无人解答此问题,难道大家都只用 axios.post 吗,但是我又很犯贱,偏想要用 delete,无奈之下只好去查看源码,但是作为菜鸟,我很少去看源码这种东西,看了半天,终于发现了问题

各位观众,看到没有,delete 和 post 、put 的参数不一样,post、put都有三个参数,分别为url、data还有config,而delete只有两个参数,第一个是url,第二个是config,我又去看config所实现的接口类型

这个接口里面也有一个data,突然间我就明白了,我之前发请求时是这样调用的 axios.post('/api',{id:1}) 、axios.put('/api',{id:1}),我原以为delete应该也是这样调用 axios.delete('/api',{id:1}) ,但后台却接收不到,是因为 post 和 put 第二个参数是data,所以可以直接在第二个参数的位置写上数据,后台可以访问到,而delete第二个参数是 config ,所以要通过 config 里面的 data 来传参,所以应该这样写:

axios.delete('/api',{data:{id:1}})

在数据的外面包一个data就可以了
--------------------- 
作者:天角海涯 
来源:优快云 
原文:https://blog.youkuaiyun.com/qq383366204/article/details/80268007 

使用 `axios` 发送 `POST` 请求,如果后端(如 Spring Boot)接收到的数据中多出一个等号 `=`,通常是因为前后端在数据传输格式上的处理方式不一致。 ### 问题原因 `axios` 默认使用 `Content-Type: application/json` 来发送数据,这意味着它会将 JavaScript 对象序列化为 JSON 字符串。然而,某些后端框架(如 Spring Boot)可能期望接收到的是 `application/x-www-form-urlencoded` 格式的请求体,而不是 JSON 数据。在这种情况下,后端可能会错误地解析 JSON 字符串,导致数据中出现多余的等号 `=`。 例如,如果前端发送的是 JSON 字符串 `"{\"id\":123}"`,而后端期望的是 `x-www-form-urlencoded` 格式,它可能会将整个 JSON 字符串解析为键值对,误将 `"` 和 `:` 解释为特殊字符,从而导致数据中出现多余的 `=`。 ### 解决方案 #### 1. 修改前端请求格式 可以将 `axios` 发送的数据转换为 `application/x-www-form-urlencoded` 格式,而不是默认的 JSON 格式。可以通过使用 `qs` 库来序列化数据[^3]。 ```bash npm install qs ``` ```javascript import axios from 'axios'; import qs from 'qs'; axios.post('stuInfo/delete', qs.stringify({ id: row.id }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(response => { if (response.data.flag) { this.$message({ message: response.data.message, type: 'success' }); } else { this.$message.error(response.data.message); } }).finally(() => { this.searchBtn(); }); ``` #### 2. 修改后端接收方式 在 Spring Boot 后端,确保控制器方法能够正确处理 JSON 数据。可以通过使用 `@RequestBody` 注解来接收 JSON 格式的请求体。 ```java @RestController @RequestMapping("/stuInfo") public class StudentController { @PostMapping("/delete") public ResponseEntity<?> deleteStudent(@RequestBody Map<String, Object> payload) { Integer id = (Integer) payload.get("id"); // 处理删除逻辑 return ResponseEntity.ok().build(); } } ``` #### 3. 使用 `FormData` 对象 另一种方法是使用 `FormData` 对象来构建请求体,这样可以确保数据以 `multipart/form-data` 格式发送。 ```javascript const formData = new FormData(); formData.append('id', row.id); axios.post('stuInfo/delete', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { if (response.data.flag) { this.$message({ message: response.data.message, type: 'success' }); } else { this.$message.error(response.data.message); } }).finally(() => { this.searchBtn(); }); ``` ### 总结 - **问题原因**:前后端数据传输格式不一致,前端发送 JSON,后端期望 `x-www-form-urlencoded`。 - **解决方案**: - 前端使用 `qs.stringify` 将数据转换为 `x-www-form-urlencoded` 格式。 - 后端使用 `@RequestBody` 接收 JSON 数据。 - 使用 `FormData` 构建请求体以 `multipart/form-data` 格式发送。 通过以上方法,可以有效解决 `axios` 发送 `POST` 请求后台接收到的数据中多出等号的问题。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值