如何在TypeScript中用Axios提取Laravel API的422验证错误

算力阿峰

2026-7-9

解决Axios请求Laravel API 422错误时TypeScript的unknown类型警告

针对Laravel返回的422验证错误响应，我们可以通过自定义类型守卫安全缩小data的类型范围，避免滥用any或宽泛的object类型。

步骤1：定义Laravel验证错误的响应类型

先明确Laravel返回的验证错误结构，通常包含message和errors字段，其中errors是键为字段名、值为错误信息数组的对象：

interface LaravelValidationError {
  message: string;
  errors: Record<string, string[]>;
}

步骤2：编写类型守卫函数

这个函数用来判断未知类型的data是否符合我们定义的LaravelValidationError类型：

function isLaravelValidationError(data: unknown): data is LaravelValidationError {
  return (
    typeof data === 'object' &&
    data !== null &&
    'errors' in data &&
    typeof (data as LaravelValidationError).errors === 'object' &&
    (data as LaravelValidationError).errors !== null
  );
}

步骤3：在Axios错误处理中使用类型守卫

修改你的错误处理代码，用自定义守卫替代简单的'errors' in data判断：

if (error.response) {
  const status = error.response.status;
  if (status === 422) {
    const data = error.response.data;

    if (isLaravelValidationError(data)) {
      // 这里TypeScript已确认data是LaravelValidationError类型，可安全访问errors
      Object.keys(data.errors).forEach((key) => {
        // 示例：获取该字段的第一个错误信息
        const firstError = data.errors[key][0];
        console.log(`${key}: ${firstError}`);
      });
    }
  }
}