Next13 App目录下如何通过Delete方法向API路由传递数据？

在Next.js 13的App Router API路由里，要获取Axios DELETE请求中携带的shipmentData，你需要从Request对象中异步解析JSON请求体，具体实现如下：

前端组件（DeleteShipment.tsx） #

你的Axios调用写法是正确的，通过{data: shipmentData}在DELETE请求中携带数据：

const shipmentData = {
  "id": "644435b27fd6c9d3b2c4cfb7",
  "createdAt": "2023-04-22T19:29:54.111Z",
  "updatedAt": "2023-04-22T19:29:54.111Z",
  "userId": "643ad685a3aa5f2976c7cbfd"
}

await axios.delete(`/api/shipments/${shipmentId}`, {data: shipmentData});

API路由（/api/shipments/[shipmentsId]/route.ts） #

在DELETE函数中，通过await req.json()解析请求体，拿到shipmentData：

export async function DELETE(req: Request) {
  // 解析请求体获取shipmentData
  const shipmentData = await req.json();
  
  // 后续可根据业务需求使用shipmentData，比如校验用户权限、执行删除逻辑等
  console.log(shipmentData);
  
  return new Response(JSON.stringify({ success: true }), { status: 200 });
}

注意事项 #

• 虽然HTTP规范中DELETE请求通常不建议携带请求体，但Axios和Next.js都支持这种用法，可根据业务需求使用。
• 建议给req.json()添加try/catch捕获解析错误，避免请求因格式问题报错。

内容的提问来源于stack exchange，提问作者onnedaay