[ BUG ] 踩坑 Axios Delete 请求传参

踩坑 Axios Delete 请求传参

问题描述

今天在写前后端交互时,我想将 data 数据通过 delete 进行传参 axios.delete("/info", data),但是发现后端一直提示参数错误,我看了看代码也没错啊。跟 postpatch 一样的写法为什么会出现参数错误。然后花了大量时间检查代码,最终还是不行。

无奈我只能在网上寻找答案,最后才发现是因为 Delete 本身的问题,下面是问题的解决办法:

解决办法

我们将数据对象 data 作为第二个参数直接传递给 Axiospost 方法。Axios 会将该对象自动转换为请求体,并发送到服务器上。

javascript 复制代码
const text = async () => {
  // 请求Post
  await axios.post("/info", data)
  // 请求Patch
  await axios.patch("/info", data)

  // 请求Delete
  await axios.delete("/info", data) // 错误写法
}

然而,对于 DELETE 请求,情况略有不同。根据 RESTful API 设计,DELETE 请求通常不包含请求体,而是将数据放在请求 URL 中。但是,一些后端框架默认不解析 DELETE 请求的请求体,因此如果需要在 DELETE 请求中使用请求体,我们需要通知后端框架解析请求体数据。

为了解决这个问题,Axios 提供了一种特殊的方式。我们需要使用一个对象字面量作为第二个参数,且该对象包含一个自定义的 data 字段来传递对象数据

javascript 复制代码
axios.delete("/info", { data })

总结

POST 请求中,我们可以直接将数据对象作为第二个参数传递给 Axios,因为 POST 请求通常包含请求体。但是在 DELETE 请求中,我们需要使用对象字面量套一个自定义的 data 作为第二个参数,并使用 data 字段指定数据。

相关推荐
前端小巷子几秒前
CSS单位完全指南
前端·css
SunTecTec41 分钟前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪2 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员4 小时前
layui时间范围
前端·javascript·layui
NoneCoder4 小时前
HTML响应式网页设计与跨平台适配
前端·html