为什么 POST axios api 返回奇怪的 %5B%7B%22 个字符作为响应？答案

【问题标题】：Why POST axios api returns strange %5B%7B%22 characters in response?为什么 POST axios api 返回奇怪的 %5B%7B%22 个字符作为响应？
【发布时间】：2021-08-10 21:20:22
【问题描述】：

我有一个 basketProducts 对象 array，我想将它传递给 POST getBasketTotal api

做console.log(basketProducts)我收到[{"barcode": "80582588", "quantity": 1}]

但是当我调用 api 时

const basketTotalResponse = await api.getBasketTotal(
 {                                                          
  items: JSON.stringify(basketProducts)
 }
)

请求中传递的数据是这个

items=%5B%7B%22barcode%22%3A%2280582588%22%2C%22quantity%22%3A1%7D%5D

导致错误 500。

为什么我没有得到正确的请求数据值作为[{"barcode": "80582588", "quantity": 1}]？

我尝试过使用和不使用 JSON.stringify() 但 api 请求总是相同的

【问题讨论】：

某些字符不允许出现在 URL 中，必须是 encoded with %something。 URL 确实包含您的字符串化数据。不管是什么问题，都不是这样。（我们不知道问题出在哪里，因为我们不知道 API 期望以什么格式提供数据）。
您是在执行 GET 还是 POST，从您请求的数据来看，它看起来在 Querystring 上，而不是 POST 数据。
如果您使用的是 axios，它应该为您完成所有的字符串化和编码；你不应该尝试再猜测这些事情。
我投票结束这个问题，因为目前还没有完整的信息集。正确地说明这将包括完全可重现的代码集（在代码中显示实际的basketProducts 对象示例、API 端点以及 API 端点中的调试在调用此 API 端点时显示的内容 - 它说了什么？
您的问题找到解决方案了吗？

标签： javascript arrays reactjs post axios

【解决方案1】：

如果您想使用axios 使用参数执行获取请求，您可以使用axios.get() 并传递参数。

axios.get('/basket', {
  params: basketProducts
}).then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
});

【讨论】：

【解决方案2】：

您正尝试在 HTTP GET 请求中发送 JSON 数据。因此它们将被 URL 编码并作为查询参数的一部分传递。因此，与其尝试将 JSON 原样发送到 URL，不如从 JSON 中提取密钥。或者对其进行编码并将其作为参数发送

let params = new HttpParams()
                .set("items",encodeURIComponent(JSON.stringify(basketProducts)))

【讨论】：

【解决方案3】：

这样试试吧……

const basketTotalResponse = await api.getBasketTotal(
 {                                                          
  items: JSON.stringify({basketProducts})
 }
)

不要按原样传递 basketProducts，而是在对象中传递它

【讨论】：

使用 JSON.stringify 是这里的选项。