Axios发送POST请求报500错误但数据仍更新的代码问题排查

• 输出顺序异常问题 #

你代码中的Promise链式调用语法错误，then方法需要接收函数作为回调参数，但你直接在then括号内执行了方法，导致代码同步立即运行，不需要等待异步请求返回：

• .then(this.props.actions.getDetails(params.pid)) 会立即调用getDetails方法，而非等待前面的axios请求完成后触发
• .then(console.log("Here it all ends!")) 会立即执行打印逻辑，所以这行是第一个输出的内容

• 接口返回500但数据仍更新问题 #

  • 服务端接口逻辑存在缺陷：先执行了数据更新操作，后续处理（比如参数校验、返回值拼装、日志记录等）时抛出异常，所以数据已经被修改，但接口最终返回500状态码
  • Postman调用正常但代码调用报错，说明两者传参存在差异：你代码中的assigned变量取值为this.state.projres && this.state.projres.assign，如果this.state.projres未初始化，assigned会是undefined，传入FormData后会转为字符串"undefined"，和你Postman中传入的有效值不一致，触发服务端异常

• 500错误被静默的问题 #

你在第一个then中传入了第二个参数作为错误回调，接住了axios抛出的500异常，所以链式调用不会中断，后续的getDetails仍会执行，拉到更新后的数据，所以看起来数据延迟后完成了更新。

首先修正Promise链式调用的写法，同时增加参数合法性校验：

changeStatus() {
    const { match: { params } } = this.props;
    // 先校验assigned是否存在，避免传无效值
    const assigned = this.state.projres?.assign
    if (!assigned) {
        console.error("assigned为空，终止请求")
        return
    }
    const fd = new FormData();
    fd.append("projectId", params.pid);
    fd.append("status", "Completed");
    fd.append("assignedToId", assigned);
    axios({
        method: 'post',
        url: `${url}/project/accepted`,
        data: fd,
    })
    .then((response) => {
        console.log("here is the resp", fd)
        // 回调函数中返回下一个要执行的Promise
        return this.props.actions.getDetails(params.pid)
    },(error) => {
        console.log("Error for it is", error)
        // 错误场景下如果也要刷新数据可以保留，否则可以抛出错误中断链式调用
        // throw error
        return this.props.actions.getDetails(params.pid)
    })
    .then(() => {
        // 把打印逻辑放在回调函数中，等待前面的异步操作完成后执行
        console.log("Here it all ends!")
    })
}

修正后可对照浏览器开发者工具的网络请求参数，确认和Postman传参完全一致，同时联系后端排查接口先更新数据后抛错的逻辑缺陷即可。

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