Laravel+Vue3中Axios验证失败时返回undefined问题排查

核心问题：未处理Axios错误回调 #

Laravel验证失败时返回的是422 Unprocessable Entity状态码，属于HTTP错误响应，Axios会将这类响应导向catch分支，而非then分支。你当前的代码只处理了成功响应（2xx状态码），错误响应完全没被捕获，所以才会出现response为undefined的情况——因为then里的代码根本没执行。

修复步骤 #

1. 前端添加错误捕获逻辑 #

修改你的调用代码，补充catch分支（或改用try/catch配合await），才能拿到Laravel返回的验证错误信息：

方式一：保留then/catch

async confirmOrder(order: splicingPurchaseOrderType) {
  Api.put(`/splicing_purchase_orders/${order.id}`, {
    ...order,
  }).then((response: any) => {
    console.log(response);
  }).catch((error: any) => {
    // 获取验证错误详情
    const errorData = error.response.data;
    console.log(errorData.errors); // Laravel返回的字段错误数组
    // 在这里展示Toast错误，比如遍历errorData.errors提示用户
  });
}

方式二：改用async/await + try/catch（更清晰）

async confirmOrder(order: splicingPurchaseOrderType) {
  try {
    const response = await Api.put(`/splicing_purchase_orders/${order.id}`, {
      ...order,
    });
    console.log(response);
  } catch (error: any) {
    const errorData = error.response.data;
    console.log(errorData.errors);
    // 展示Toast错误
  }
}

2. 确保Laravel返回JSON格式的验证错误 #

如果你的路由定义在routes/web.php而非routes/api.php，需要确保Laravel在验证失败时返回JSON：

修改app/Exceptions/Handler.php，添加ValidationException的自定义渲染逻辑：

use Illuminate\Validation\ValidationException;

public function register()
{
    $this->renderable(function (ValidationException $e, $request) {
        // 判断请求是否期望JSON响应
        if ($request->wantsJson()) {
            return response()->json([
                'message' => '验证失败',
                'errors' => $e->errors(),
            ], 422);
        }
    });
}

如果路由已经在routes/api.php中，Laravel默认会自动返回JSON格式的验证错误，这一步可以跳过。

3. 检查Axios拦截器是否吞掉错误 #

如果你的Axios实例配置了响应拦截器，确保错误被正确传递，不要私自吞掉：

instance.interceptors.response.use(
  (response) => response, // 成功响应直接返回
  (error) => {
    // 必须返回Promise.reject，否则错误不会传递到业务代码的catch分支
    return Promise.reject(error);
  }
);

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