How to POST single value as request body using axios instance

Question

我有一个 POST API 为：

• 网址：

  /get-item

• 方法：

  POST

• 请求正文：

  id(Integer)

我知道将单个值作为请求主体而不是查询或路径参数有点奇怪，但它就是这样。

现在我正在尝试使用以下代码从我的

React App

调用API。

export const axiosInstance = axios.create(AXIOS_BASE_CONFIG);
// ...

const loadMyItem = async (itemId) => {
    console.log("itemId:: ", itemId);
    setLoading(true);
    axiosInstance.post(
      URL_GetMyItem,
      itemId
    ).then((res) => {
      console.log("res", res);
      setMyItem(res?.result);
    }).catch((err) => {
      errorHandler(err);
    }).finally(() => {
      setLoading(false)
    })
  }

但是出现 Bad Request 错误。

回复：

{"timestamp":"...","status":400,"error":"Bad Request","path":"/.../get-item"}

如何使用 axios 调用具有单一值的 POST API 作为 Request Body？

Answer 1

默认情况下，Axios 会检测到您的

itemId

payload 是原始类型（字符串/数字），将其字符串化并使用

content-type: application/x-www-form-urlencoded

发送。

问题是整数的字符串化版本不是此标头的有效格式。

您需要自定义内容类型标头并将值作为纯文本发送

axiosInstance
  .post(URL_GetMyItem, itemId, {
    headers: {
      "content-type": "text/plain",
    },
  })
  .then(({ data }) => {
    setMyItem(data.result);
  })
  .catch(errorHandler)
  .finally(() => {
    setLoading(false);
  });

我强烈推荐的替代方案是 Fetch API，它不那么自以为是并且更稳定

fetch(`${AXIOS_BASE_CONFIG.baseURL}/${URL_GetMyItem}`, {
  method: "POST",
  body: itemId,
})
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Request failed: ${URL_GetMyItem}`);
    }
    return response.json();
  })
  .then((data) => {
    setMyItem(data.result);
  })
  .catch(errorHandler)
  .finally(() => {
    setLoading(false);
  });

Answer 2

我从未使用过 axiosInstance，但假设它的功能与 axios.post 相同...

我不确定你在做什么：

URL_GetMyItem,
itemId

这里在发送post请求的时候，需要赋值合适的值。见下文：

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

（来自https://axios-http.com/docs/post_example）

您可以看到他们将“Fred”分配给“firstName”。在您的请求中，您没有分配任何值！尝试将 itemId 分配给您正在调用的 API 端点所需的字段的实际名称。

帮助这有帮助！