如何从Axios捕获的API错误响应中提取验证提示信息

问题场景 #

我现在遇到一个技术问题，需要从API返回的验证类错误响应中提取提示信息展示给用户。API的错误响应格式如下：

{
  "errors": [
    {
      "message": "Validation failed for the field [confirmAppointment].",
      "extensions": {
        "validation": {
          "input.birth_date": [
            "The input.birth date must be a date before today."
          ]
        },
        "category": "validation"
      },
      "locations": [
        {
          "line": 1,
          "column": 11
        }
      ],
      "path": [
        "confirmAppointment"
      ]
    }
  ],
  "data": {
    "confirmAppointment": null
  }
}

这个响应是在Axios的catch回调中获取到的，我尝试了下面的代码，但只能返回对象数组，没能正确提取出需要的提示信息：

let result = err.response.data.errors.extensions.map(a => a);

请问有什么正确的解决思路吗？

解决思路与代码示例 #

首先得先理清你这段代码的问题：err.response.data.errors是一个数组，不是单个对象，所以你直接访问.extensions会拿到undefined，更没法直接用map处理。

正确的做法是遍历errors数组里的每个错误对象，然后从每个对象的extensions.validation中提取所有字段对应的错误提示。这里可以用flatMap和Object.values来高效收集所有提示信息：

// 在Axios的catch回调函数内
catch (err) {
  // 先判断响应数据和错误数组是否存在，避免属性不存在报错
  if (err.response?.data?.errors) {
    // 提取所有验证错误提示
    const userErrorMessages = err.response.data.errors.flatMap(errorItem => {
      // 获取validation对象中所有字段的错误数组，再扁平化处理
      return Object.values(errorItem.extensions.validation).flat();
    });

    // 现在userErrorMessages就是所有需要展示给用户的提示数组
    console.log(userErrorMessages);
    // 示例：用换行分隔展示所有提示
    alert(userErrorMessages.join('\n'));
  }
}

代码解释 #

1. 可选链操作符?.：用来避免当err.response、data或errors不存在时抛出 TypeError，让代码更健壮。
2. flatMap：先遍历errors数组里的每个错误对象，再把每个对象处理后的结果合并成一个新数组。
3. Object.values(errorItem.extensions.validation)：获取validation对象中所有字段对应的错误数组（比如示例里的["The input.birth date must be a date before today."]）。
4. flat()：把嵌套的错误数组扁平化，确保最终得到的是一维的提示信息数组，方便后续展示。

如果你的场景里只需要单个错误提示（比如取第一个），也可以简化成：

const firstErrorMessage = err.response.data.errors[0]?.extensions?.validation?.['input.birth_date']?.[0];

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