如何处理前端的标准错误对象？答案

【问题标题】：How to deal with standard Error object on frontend?如何处理前端的标准错误对象？
【发布时间】：2020-01-18 01:03:34
【问题描述】：

我有一个包含许多 API 请求的前端应用程序，但是处理错误响应很痛苦。

有时我需要遍历许多嵌套对象，例如：error.response.data.email，有时是 error.response.data.address.province[0]。

我无法预测所有错误，而编写手动“解析器”对我来说似乎是一个肮脏的额外解决方案：

const errorsObject = err.response.data
    let errors = ''

    Object.keys(errorsObject).map(key => {
      if (key === 'address') {
        Object.keys(errorsObject.address).map(
          key => (errors += `${key} : ${errorsObject.address[key]}\n`)
        )
      } else {
        errors += `${key} : ${errorsObject[key]}\n`
      }
      return undefined
    })

    yield toast.error(errors)

而且它仍然没有涵盖所有内容。

是否有任何前端解析器？如果没有，我们的后端是 Python(Django)，也许后端有一个包？理想情况下，我希望看到一组平面对象{title, message}。

【问题讨论】：

标签： javascript api error-handling

【解决方案1】：

您的错误对象格式正确，并且从前端的角度分析错误的基本思想是正确的。

我在您的错误响应中看到的唯一问题是 nesting 和 hydration。

如果您想要水合响应，您应该向解析器提供正确检索数据的功能，并最终将其映射到前端 UI。

通常我在表单中输入一个对象，通常称为 errors，我可以在其中安全地通过字段名称检索与字段相关的错误。

恕我直言，您做得“正确”，请尝试使用对象类型而不是对象特定键（例如“地址”）。

这是我经常使用的错误解析器示例。当发生非常深的嵌套或需要解析数组时，我通常会更新解析器以获取错误并获得从我的 UI 中检索它的能力，例如在字段下显示错误，将其边框设置为红色等等：

import _ from 'lodash';

export const getErrors = (errors) => {
  const validationErrors = _.get(errors, 'data.validation_messages') ? errors.data.validation_messages : {};
  // Iterate over object keys
  _.forOwn(validationErrors, (value, key) => {
    // Simple error: { key: { errorKey: value }} - Nested Error {key: { nestedErrorKey: { errorKey: value }}
    const data = validationErrors[key][Object.keys(validationErrors[key])[0]];
    // Check that content of key is neither null or object (nested validation)
    if (validationErrors[key] !== null && typeof data !== 'object') {
      validationErrors[key] = _.values(value)[0];
    } else if (validationErrors[key] !== null && typeof data === 'object') { // TODO: Recursive approach ?
      // Trasform nested values so obj: { nestedKey: nestedvalue } becomes obj_nestedKey: nestedValue
      _.forOwn(validationErrors[key], (nestedValue, nestedKey) => {
        validationErrors[`${key}_${nestedKey}`] = _.values(nestedValue)[0];
      });
    }
  });
  return validationErrors;
};

export default getErrors;

【讨论】：

感谢理解我的奋斗！我认为有某种常见的做法，甚至是现成的解决方案，但似乎我仍然必须解析东西。
这很大程度上取决于您的 API 最终达到的标准（我的通常是 HAL），但核心概念是在前端进行操作，而不涉及后端响应。当您在 API 标准上使用解析器有足够的时间时，您就可以解析在此基础上生成的任何 API。

【解决方案2】：

在我之前的项目中，每个错误都会在响应中出现一个错误代码，在前端，每个错误代码都会映射到错误消息，这很容易提供多语言环境的错误消息。如果您对 API 有控制权并添加一个键作为 error_code，则可以尝试这样做。

【讨论】：