时间戳

首页 > 解决方案 > 如何在 React 上使用 axios 执行发布请求并将您的数据作为 FormData 传递？

reactjs - 如何在 React 上使用 axios 执行发布请求并将您的数据作为 FormData 传递？

问题描述

有这个 API：http: //zssn-backend-example.herokuapp.com/api/，详细在这里：http: //zssn-backend-example.herokuapp.com/swagger-api/index.html# !/people/ Api_People_index。我正在尝试在此端点“/people/{person_id}/properties/trade_item.json”上执行 POST 请求（在幸存者之间进行交易）。在测试网站上，我用以下数据填写字段并得到 204 响应：

person_id:34e183a6-965e-4a61-8db5-5df9103f4d4b

消费者[名称]：Person4

消费者[pick]：AK47：1；金宝汤：1

消费者[付款]：急救袋：2

我调查了一下，得到了 这个信息

不理解“PROPERTY[KEY]:VALUE”表示

当我尝试使用此代码请求请求时，使用相同的值（顺便说一下，此 API 的数据库每 24 小时清除一次，因此这些值可能不起作用，即使您以正确的方式执行此操作）：

这是我的代码：

    async function handleTrade(e){

   e.preventDefault();

     const config = {
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
     };
     await api.post(
       "/people/" + match.params.id + "/properties/trade_item.json",
       {
         person_id:match.params.id,
         name: survivorRef.current,
         pick: survivorItemsToPick,
         payment: userItemsToPay,
       },
       config
     );

这就是我得到 的：请求：请求描述

响应： 响应描述

我怎样才能以正确的方式提出这个请求以获得与第一个图像相同的结果？

标签： reactjspostrequestaxiosform-data

解决方案

你可以使用 FormData 来发送请求，我做了一个例子：

const data = new FormData();
data.append("customer[name]", "Person4");   
data.append("customer[pick]", "AK47:1");         
await api.post("/people/" + match.params.id + "/properties/trade_item.json", data, config)

推荐阅读