React+Laravel API新增数据成功后页面不重载无提示问题排查

ReactJS对接Laravel API开发新增单元功能时，操作实际已执行成功：单元数据正常写入数据库，接口业务逻辑执行符合预期，但前端未触发window.location.reload()页面重载，也未展示任何成功提示。

前端逻辑 #

const addUnit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append('unit_name', unit_name);
  formData.append('building_id', building_id);
  formData.append('floor_id', floor_id);
  formData.append('type_id', type_id);
  formData.append('user_id', user_id);
  formData.append('unit_status', unit_status);
  formData.append('unit_roomnumber', unit_roomnumber);
  formData.append('unit_added_date', unit_added_date);
  formData.append('unit_rent_per_month', unit_rent_per_month);
  formData.append('frais_percent', frais_percent);
  for (let i = 0; i < unit_pictures.length; i++) {
    formData.append('unit_pictures[]', unit_pictures[i])
  }
  axios.post(`${API_ENDPOINT}/api/addUnite`, formData).then(response => {
    if (response.data.status === 200) {
      window.location.reload();
    }
    else if (response.data.status == 400) {
      new Swal("warning", response.data.errors, "Warning");
    }
  })
}

后端接口逻辑 #

public function addUnite(Request $request)
{
    $validator = Validator::make($request->all(), [
        'unit_name' => 'required|max:191',
        'unit_status' => 'required',
        'unit_roomnumber' => 'required',
        'unit_added_date' => 'required',
        'unit_rent_per_month' =>'required' 
    ]);
    if ($validator->fails()) {
        return response()->json([
            'status' => 422,
            'errors' => "All Fields Are required !",
        ]);
    }
    else {
        $exist = Unite::where('type_id', '=', Input::get('type_id'))
            ->where('unit_roomnumber', '=', Input::get('unit_roomnumber'))
            ->where('building_id', '=', Input::get('building_id'))
            ->exists();

        if ($exist) {
            return response()->json([
                'status' => 400,
                'errors' => "This Unit already exist !",
            ]);
        }
        else {
            $unit = new Unite();
            $unit->unit_name = $request->input('unit_name');
            $unit->building_id = $request->input('building_id');
            $unit->unit_id = $request->input('unit_id');
            $unit->user_id = $request->input('user_id');
            $unit->frais_percent = $request->input('frais_percent');
            $unit->floor_id = $request->input('floor_id');
            $unit->type_id = $request->input('type_id');
            $unit->unit_status = $request->input('unit_status');
            $unit->unit_roomnumber = $request->input('unit_roomnumber');
            $unit->unit_added_date = $request->input('unit_added_date');
            $unit->unit_rent_per_month = $request->input('unit_rent_per_month');

            $allUploadApiReponse = array();
            foreach ($unit->unit_pictures = $request->file('unit_pictures') as $imagefile) {
                $uploadedFileUrl = cloudinary()->upload(
                    ($imagefile)->getRealPath(),
                    [
                        'folder' => 'Units',
                        'discard_original_filename' => true,
                    ]
                )->getSecurePath();
                array_push($allUploadApiReponse, $uploadedFileUrl);
            }
            // 调试输出代码
            print_r($allUploadApiReponse);
            $unit->unit_pictures = $allUploadApiReponse;
            if($unit->save()){
                return response()->json([
                    'message' => "Unit Added Successfully",
                    'status' => 200,
                ]);
            }
        }
    }
}

1. 核心问题：后端代码中遗留了调试用的print_r($allUploadApiReponse);语句，该语句会在JSON响应返回前直接向HTTP响应体输出数组打印内容，彻底破坏了接口返回的合法JSON结构。前端axios默认按JSON格式解析响应时，要么解析失败抛出异常（前端未写catch捕获导致错误静默），要么解析后的response.data不存在预期的status字段，无法命中status === 200的判断分支，自然不会触发页面重载和提示。
2. 前端隐患：
   • 未添加catch分支处理请求异常、格式解析错误的场景，出错后无任何反馈
   • 状态判断逻辑不全，后端参数校验失败返回422状态时没有对应处理逻辑，也不会弹出提示
3. 后端隐患：
   • 没有兜底返回逻辑，若$unit->save()执行失败，接口会返回空响应，前端无法识别处理
   • 响应体自定义状态码和HTTP标准状态码未对齐，增加前端判断成本

后端调整 #

1. 直接删除调试代码print_r($allUploadApiReponse);，接口返回JSON前禁止任何非JSON内容的输出
2. 补充保存失败的兜底返回逻辑，核心修改段如下：

// 删除调试打印代码
// print_r($allUploadApiReponse);
$unit->unit_pictures = $allUploadApiReponse;
if($unit->save()){
    return response()->json([
        'message' => "Unit Added Successfully",
        'status' => 200,
    ], 200); // 对齐HTTP状态码
}else{
    return response()->json([
        'status' => 500,
        'errors' => "单元保存失败，请稍后重试",
    ], 500);
}

3. 建议将其他分支的HTTP状态码和响应体内自定义status对齐：参数校验失败返回422 HTTP状态码，重复数据返回400 HTTP状态码。

前端调整 #

1. 补充catch异常捕获，补全所有状态码的处理逻辑，优化提示体验：

axios.post(`${API_ENDPOINT}/api/addUnite`, formData)
.then(response => {
  const res = response.data;
  if (res.status === 200) {
    // 先弹成功提示，用户确认后再刷新页面
    new Swal("success", res.message, "Success").then(() => {
      window.location.reload();
    })
  } else if (res.status === 400 || res.status === 422) {
    new Swal("warning", res.errors, "Warning");
  } else {
    new Swal("error", "未知错误，请稍后重试", "Error");
  }
})
.catch(err => {
  console.error("请求异常：", err);
  new Swal("error", "请求失败，请检查网络连接后重试", "Error");
})

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