[ 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 字段指定数据。

相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘4 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。5 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome