如何在React中使用Axios向API发送POST JSON请求并存储响应

开发者阿泽

2026-9-28

问题核心原因

你的代码存在4个问题导致无法达到预期效果：

异步逻辑顺序错误：axios.post为异步请求，你写在.then外部的localStorage.getItem执行时，请求还未完成，只能读到旧数据甚至null
请求体为空：axios.post的第二个参数是要提交的JSON请求体，你当前传的是空对象，没有携带服务端要求的必填字段，接口会直接返回参数校验失败
缺少错误捕获：没有添加.catch逻辑，接口报错、跨域、请求超时等问题都不会有提示，难以定位故障
地址格式错误：请求URL开头有多余空格，会导致地址解析异常

修正后完整代码

handleSubmit(event) {
  event.preventDefault();
  // 替换成你实际要提交的必填字段和对应值
  const postData = {
    字段1: 对应值1,
    字段2: 对应值2
  };
  // 删掉了URL开头的多余空格
  axios.post('http://ec2-13-213-17-111.ap-southeast-1.compute.amazonaws.com:8888/home', postData)
  .then((res) => {
    // 响应返回后先写入本地存储
    localStorage.setItem("apiData1", JSON.stringify(res.data));
    // 写入完成后再读取打印，保证拿到的是最新数据
    const data = JSON.parse(localStorage.getItem("apiData1"));
    console.log(data);
  })
  .catch((err) => {
    // 打印请求错误信息，方便排查问题
    console.error('请求失败：', err);
  })
}